web-dev-qa-db-fra.com

Carrousel texte uniquement

Je ne peux pas avoir un carrousel avec seulement du texte sans aucun img. Le texte semble entrer en collision avec les commandes. Chaque exemple que j'ai trouvé utilise le <img>. J'ai essayé d'utiliser d-flex classe, bloc et même carousel-caption. Jusqu'à présent, rien n'a fonctionné.

<div id="carouselContent" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner" role="listbox">
        <div class="carousel-item active">
            <p>lorem ipsum (imagine longer text)</p>
        </div>
        <div class="carousel-item">
            <p>lorem ipsum (imagine longer text)</p>
        </div>
    </div>
    <a class="carousel-control-prev" href="#carouselContent" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselContent" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>
bootstrap-4twitter-bootstrap-4
8
Santhos

Je pense que le carousel-controls sont conçus pour superposer le contenu, qu'il s'agisse de texte ou d'images. Il semblerait que text-center serait une bonne option pour centrer le texte de chaque élément.

Cependant, depuis BS alpha 6, le .carousel-item est display:flex; ce qui limite une partie du positionnement que vous pouvez faire avec le contenu de carousel-item. Il y a un problème ouvert pour cela: https://github.com/twbs/bootstrap/issues/21611

Pour contourner ce problème, vous pouvez utiliser text-center et remplacer display:block pour l'élément de carrousel actif:

 <div class="carousel-item text-center p-4">
       <p>lorem ipsum (imagine longer text)</p>
 </div>

.carousel-item.active {
    display:block;
}

Démo: http://www.codeply.com/go/OJHdvdXimm

Voir aussi: Centrer verticalement le texte dans Bootstrap carrousel

5
Zim

J'ai ajouté px-5 partout (dans votre cas dans p). J'avais besoin d'espace autour et j'ai également ajouté une classe qui lui a donné une marge de 20 pixels. Cela a fonctionné.

0
junaidshah