纯文本轮播
Text only carousel
我无法拥有只有文本 没有任何 img 的轮播。文本似乎与控件发生冲突。我发现的每个示例都使用 <img>
。我尝试过使用 d-flex
class,块甚至 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>
我认为 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
另见:
我在所有地方都添加了 px-5
(在你的例子中是 p
)。我需要 space 并且还添加了一个 class 给它一个 20px 的边距。这有效。
试试容器对象
<div id="carouselContent" class="carousel slide" data-ride="carousel">
<div class="container">
<div class="carousel-inner text-center text-white m-auto" role="listbox">
<div class="carousel-item active text-center p-4">
<div class="user_text mb-3">
<p class="mbr-fonts-style display-7">
<strong>
Blah
</strong><br>
</p>
</div>
</div>
<div class="carousel-item text-center p-4">
<div class="user_text mb-3">
<p class="mbr-fonts-style display-7">
<strong>
Blah Blah
</strong><br>
</p>
</div>
</div>
</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>
变化:
<div class="carousel-caption d-none d-md-block"></div>
收件人:
<div class="carousel-caption"></div>
.slider-wrap {
background-color: #F0F0F0;
padding-top: 5rem;
padding-bottom: 8rem;
margin-bottom: 5rem;
text-align: center;
}
.carousel-indicators {
margin-bottom: 0!important;
}
.carousel-text {
margin: 1rem;
}
.carousel-caption {
margin: auto!important;
position: initial!important;
padding-right: 8rem;
padding-left: 8rem;
}
我无法拥有只有文本 没有任何 img 的轮播。文本似乎与控件发生冲突。我发现的每个示例都使用 <img>
。我尝试过使用 d-flex
class,块甚至 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>
我认为 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
另见:
我在所有地方都添加了 px-5
(在你的例子中是 p
)。我需要 space 并且还添加了一个 class 给它一个 20px 的边距。这有效。
试试容器对象
<div id="carouselContent" class="carousel slide" data-ride="carousel">
<div class="container">
<div class="carousel-inner text-center text-white m-auto" role="listbox">
<div class="carousel-item active text-center p-4">
<div class="user_text mb-3">
<p class="mbr-fonts-style display-7">
<strong>
Blah
</strong><br>
</p>
</div>
</div>
<div class="carousel-item text-center p-4">
<div class="user_text mb-3">
<p class="mbr-fonts-style display-7">
<strong>
Blah Blah
</strong><br>
</p>
</div>
</div>
</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>
变化:
<div class="carousel-caption d-none d-md-block"></div>
收件人:
<div class="carousel-caption"></div>
.slider-wrap {
background-color: #F0F0F0;
padding-top: 5rem;
padding-bottom: 8rem;
margin-bottom: 5rem;
text-align: center;
}
.carousel-indicators {
margin-bottom: 0!important;
}
.carousel-text {
margin: 1rem;
}
.carousel-caption {
margin: auto!important;
position: initial!important;
padding-right: 8rem;
padding-left: 8rem;
}