如何使 Bootstrap 轮播标题拉伸轮播的整个宽度?
How can I make a Bootstrap carousel caption stretch the full width of the carousel?
我有一个轮播,它是整个页面的宽度。现在我需要使 carousel-caption 成为页面的全宽以及黄色背景。背景应为页面的全宽,但实际标题文本应居中。
它应该是这样的:
这是现在的样子:
HTML:
<!--START CAROUSEL-->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="false">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="../../images/LD/desktop_hero1.png" alt="...">
<div class="carousel-caption">
Text for caption 1 here.
</div>
</div>
<div class="item">
<img src="../../images/LD/desktop_hero2.png" alt="...">
<div class="carousel-caption">
Text for caption 2 here.
</div>
</div>
<div class="item">
<img src="../../images/LD/desktop_hero3.png" alt="...">
<div class="carousel-caption">
Text for caption 3 here.
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!--END CAROUSEL-->
CSS:
<style type="text/css">
.carousel-caption {
max-width: 100%;
width:100%;
background-color: #ffb81c;
}
</style>
你只需要添加 text-align: center 因为它实际上已经使用了整个宽度
如果有东西漂浮,你可以使用 clearfix 来解决它,检查这个 jsfidlle
<div class="carousel-caption">
<h1>
Text for caption 1 here.
</h1>
</div>
.carousel-caption h1 {
max-width: 100%;
background-color: #ffb81c;
text-align:center;
}
PD。我添加了 h1 标签以获得更好的语义结构。
carousel-caption
class 声明 div 具有绝对定位,其位置距左侧 15%。
因此您可以尝试覆盖它。这是 css:
.carousel-caption {
max-width: 100%;
width:100%;
background-color: #ffb81c;
left: 0;
}
我有一个轮播,它是整个页面的宽度。现在我需要使 carousel-caption 成为页面的全宽以及黄色背景。背景应为页面的全宽,但实际标题文本应居中。
它应该是这样的:
这是现在的样子:
HTML:
<!--START CAROUSEL-->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="false">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="../../images/LD/desktop_hero1.png" alt="...">
<div class="carousel-caption">
Text for caption 1 here.
</div>
</div>
<div class="item">
<img src="../../images/LD/desktop_hero2.png" alt="...">
<div class="carousel-caption">
Text for caption 2 here.
</div>
</div>
<div class="item">
<img src="../../images/LD/desktop_hero3.png" alt="...">
<div class="carousel-caption">
Text for caption 3 here.
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!--END CAROUSEL-->
CSS:
<style type="text/css">
.carousel-caption {
max-width: 100%;
width:100%;
background-color: #ffb81c;
}
</style>
你只需要添加 text-align: center 因为它实际上已经使用了整个宽度
如果有东西漂浮,你可以使用 clearfix 来解决它,检查这个 jsfidlle
<div class="carousel-caption">
<h1>
Text for caption 1 here.
</h1>
</div>
.carousel-caption h1 {
max-width: 100%;
background-color: #ffb81c;
text-align:center;
}
PD。我添加了 h1 标签以获得更好的语义结构。
carousel-caption
class 声明 div 具有绝对定位,其位置距左侧 15%。
因此您可以尝试覆盖它。这是 css:
.carousel-caption {
max-width: 100%;
width:100%;
background-color: #ffb81c;
left: 0;
}