如何使 Bootstrap 轮播标题拉伸轮播的整个宽度？答案

【问题标题】：How can I make a Bootstrap carousel caption stretch the full width of the carousel?如何使 Bootstrap 轮播标题拉伸轮播的整个宽度？
【发布时间】：2016-08-28 19:55:43
【问题描述】：

我有一个占整个页面宽度的轮播。现在我需要使轮播标题成为页面的整个宽度以及黄色背景。背景应该是页面的整个宽度，但实际的标题文本应该居中。

它应该是这样的：

这就是现在的样子：

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>

【问题讨论】：

你想增加标题的字体大小还是增加字母之间的间距以使其全宽？
我也不想这样做。我只希望轮播标题的背景扩展页面的整个宽度。我刚刚在我的帖子中添加了图片。希望这更有意义。
检查 .item 和 .carousel-inner 类的宽度。要将标题扩展到全宽，其父元素的宽度必须为 100%

标签： html css twitter-bootstrap carousel caption

【解决方案1】：

carousel-caption 类声明 div 具有绝对定位，其位置距左侧 15%。

所以你可以尝试覆盖它。这是css：

.carousel-caption {
    max-width: 100%;
    width:100%;
    background-color: #ffb81c;
    left: 0;
}

【讨论】：

这正是我所需要的。谢谢！

【解决方案2】：

你只需要添加 text-align: center 因为它实际上已经使用了全宽

如果有什么东西是浮动的，你可以使用 clearfix 来解决它，检查这个 jsfidlle

title example

<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 标签以获得更好的语义结构。

【讨论】：