如何使Bootstrap carousel标题伸展到carousel的整个宽度？

0s7z1bwu 于 2023-10-14 发布在 Bootstrap

关注(0)|答案(3)|浏览(109)

我有一个旋转木马，这是整个页面的宽度。现在，我需要使旋转木马标题的全宽度的网页，以及一个黄色的背景。背景应该是页面的整个宽度，但实际的标题文本应该居中。
这就是它应该看起来的样子：

这就是它现在的样子：

超文本标记语言：

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

twitter-bootstrap

来源：https://stackoverflow.com/questions/37009752/how-can-i-make-a-bootstrap-carousel-caption-stretch-the-full-width-of-the-carous

3条答案

按热度按时间

1tuwyuhd1#

carousel-caption类声明div具有绝对定位，其位置为从左侧开始的15%。
所以你可以尝试覆盖它。下面是CSS：

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

赞(0）回复(0）举报 2023-10-14

ngynwnxp2#

你只需要添加text-align：因为它实际上已经使用了整个宽度
如果有些东西是浮动的，你可以使用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;
}

i添加了h1标记以获得更好的语义结构。

赞(0）回复(0）举报 2023-10-14

nle07wnf3#

将以下类别添加到.сarousel-caption，它应该能够工作。

<style>
.carousel-caption {
    text-align: center;
    width: 100vw; /* Fill the entire width of the visible area of the browser */
    left: 50%; /* Align to center the page */
    transform: translateX(-50%); /* Centered horizontally */
}
</style>

赞(0）回复(0）举报 2023-10-14

我来回答

如何使Bootstrap carousel标题伸展到carousel的整个宽度？

3条答案

相关问题

热门标签

最新问答