bootstrap-4 – 纯文本轮播

发布时间：2020-12-17 21:33:09 所属栏目：安全来源：网络整理

导读：我没有一个只有文字而没有任何img的旋转木马.文本似乎与控件发生冲突.我发现的每个例子都使用 img.我试过使用d-flex类,块甚至是旋转木马标题.到目前为止,没有任何工作. div id="carouselContent" class="carousel slide" data-ride="carousel" div class="ca

我没有一个只有文字而没有任何img的旋转木马.文本似乎与控件发生冲突.我发现的每个例子都使用< img>.我试过使用d-flex类,块甚至是旋转木马标题.到目前为止,没有任何工作.

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

解决方法

我认为旋转木马控件设计用于覆盖内容,无论是文本还是图像.看起来文本中心似乎是将每个项目的文本集中在一起的好选择.

但是,从BS alpha 6开始,.carousel-item显示：flex;这限制了你可以对carousel-item的内容做一些定位.这有一个未解决的问题：
https://github.com/twbs/bootstrap/issues/21611

作为一种变通方法,您可以使用文本中心并覆盖显示：阻止活动轮播项：

<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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!