Nur-Text-Karussell

Ich bin nicht in der Lage, ein Karussell mit nur text ohne img. Der text scheint zu kollidieren mit den Steuerelementen. Jedes Beispiel, das ich gefunden habe, nutzt die <img>. Ich habe versucht, zu verwenden d-flex Klasse, der block und auch die carousel-caption. Nichts hat funktioniert, so weit.

<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>
haben Sie versucht, das hinzufügen einiger Polsterung auf .carousel-inner?
Hinzufügen padding-left über 200px und padding-bottom etwa 50px etwas funktioniert, aber es sieht nicht sehr gut mit dem Karussell-Steuerelemente. Ich kann natürlich versuchen, Sie zu positionieren, zu. Fühlt es sich jedoch, daß es ein klarer Weg, es zu tun.

InformationsquelleAutor Santhos | 2017-01-09

  1. 4

    Ich denke, die carousel-controls sind entworfen, um die overlay-Inhalte, egal ob text oder Bilder. Es scheint, dass text-center wäre eine gute option, um die Mitte der text der einzelnen Artikel.

    Jedoch, als der BS alpha 6, die .carousel-item ist display:flex; die Grenzen einige der Positionierung können Sie den Inhalt von carousel-item. Es ist eine offene Frage:
    https://github.com/twbs/bootstrap/issues/21611

    Als eine Problemumgehung, die Sie verwenden konnten text-center und überschreiben display:block für die aktiven carousel item:

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

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

    Demo: http://www.codeply.com/go/OJHdvdXimm

    Siehe auch: Vertikal text zentrieren in der Bootstrap-Karussell

    Ich sah das Problem, aber ich hab irgendwie das Gefühl, dass Sie nicht verwandt war. display: block hilft definitiv. Ich versucht, um 100px nach Links und rechts Polsterung. Das passt den text auch zwischen den Bedienelementen, aber die animation ist funky.
    Gibt es einen Weg, um die Pfeile anzeigen mit diesem?
    Die Pfeile werden angezeigt.

    InformationsquelleAutor Zim

Schreibe einen Kommentar