web-dev-qa-db-fra.com

Comment déplacer bootstrap 3 légende du carrousel sous les images?

J'ai ce html qui montre des images de diaporama en utilisant bootstrap 3:

<div class="col-sm-8">



            <div id="myCarousel" class="carousel slide" data-ride="carousel">
            <!-- Indicators -->
            <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
                <li data-target="#myCarousel" data-slide-to="2"></li>
                <li data-target="#myCarousel" data-slide-to="3"></li>
                <li data-target="#myCarousel" data-slide-to="4"></li>
                <li data-target="#myCarousel" data-slide-to="5"></li>
            </ol>

            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox">
                {% for p in posts %}
                    {% if forloop.counter == 1 %}
                    <div class="item active">
                    {% else %}
                    <div class="item">
                   {% endif %}

                    {% if p.headimage %}
                    <img src="{{ p.headimage.url }}" alt="Image" width="460" height="345">
                     {% endif %}
                      <div class="carousel-caption">
                        <h3>{{ p.title }}</h3>
                        <p>{{ p.teaser }}</p>
                      </div>
                </div>
                {% endfor %}
                </div>

                <!-- Left and right controls -->
                <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>

</div>

Je veux que la légende soit affichée sous l'image, pas dessus.

J'ai essayé de manipuler le html et le css mais je n'ai pas pu y arriver, alors appréciez votre aide.

Mise à jour: Mis à part le bootstrap natif, j'ai essayé ces directives css personnalisées (qui n'ont pas aidé):

.carousel-inner { padding-bottom:95px; }
.carousel-caption { bottom:-95px; }
csstwitter-bootstraptwitter-bootstrap-3carousel
12
Jand

Commencez par changer la position de l'élément caption de absolute à relative:

.carousel-caption {
    position: relative;
    left: auto;
    right: auto;
}

Démo

28
isherwood

J'ai eu un problème similaire où je voulais que la légende soit superposée sur l'image sur un grand écran et en dessous de l'image dans des tailles plus petites. J'ai fait déborder dans .carousel-inner visible. Je pense que ce serait une façon alternative et utile de positionner le texte de la légende en dehors de la limite des images du carrousel lui-même, qu'il fasse partie ou non d'un élément réactif.

Modifier: vous devez également modifier la hauteur du carrousel (le div contenant, pas "intérieure") pour s'adapter à la hauteur de l'image plus la légende.

.carousel-inner{
overflow: visible;
}
4
Aaron Joseph