Question

我无法使用只有文字而没有任何img 的轮播。文本似乎与控件发生冲突。我发现的每个例子都使用<img>。我曾尝试使用d-flex类，阻止甚至是carousel-caption。到目前为止，没有任何工作。

<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>

Answer 1

我认为carousel-controls旨在覆盖内容，无论是文字还是图片。 text-center似乎是将每个项目的文本居中的好方法。

但是，从BS alpha 6开始，.carousel-item为display:flex;，这限制了您可以使用carousel-item的内容进行的某些定位。这有一个未解决的问题： https://github.com/twbs/bootstrap/issues/21611

作为一种变通方法，您可以使用text-center并覆盖display:block作为有效轮播项目：

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

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

演示：http://www.codeply.com/go/OJHdvdXimm

另见：Vertically center text in Bootstrap carousel

Answer 2

我到处都添加了px-5（在您的情况下为p）。我需要周围的空间，并且还添加了一个类，使它的空白为20px。这行得通。

仅文字旋转木马

2 个答案: