Bootstrap 5 当在较小的屏幕上查看网站时，轮播字幕文本消失

Question

我正在使用 bootstrap 狂欢代码。我的轮播文字在常规尺寸上看起来不错，但在较小尺寸的屏幕上却消失了。文字似乎落后于图像。我已经尝试使用 z-index，媒体查询来更改字体大小、边距、填充，但它仍然是一样的。

HTML代码：

  <div id="carouselExampleDark" class="carousel carousel-light slide" data-bs-ride="carousel">
<div class="carousel-indicators">
  <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
  <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button>
  <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
  <div class="carousel-item active" data-bs-interval="10000">
    <img src="images/image1.jpeg" class="d-block w-100" alt="...">
    <div class="carousel-caption d-none d-md-block">
      <h1>First slide lable</h1>
    </div>
  </div>
  <div class="carousel-item" data-bs-interval="2000">
    <img src="images/image2.jpeg" class="d-block w-100" alt="...">
    <div class="carousel-caption d-none d-md-block">
      <h1>Second slide lable</h1>
    </div>
  </div>
  <div class="carousel-item">
    <img src="images/image3.jpeg" class="d-block w-100" alt="...">
    <div class="carousel-caption d-none d-md-block">
      <h1>Third slide label</h1>
    </div>
  </div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="prev">
  <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  <span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next">
  <span class="carousel-control-next-icon" aria-hidden="true"></span>
  <span class="visually-hidden">Next</span>
</button>

CSS代码：

.carousel-caption {
  text-align: center;
  margin-bottom: 18%;
  z-index: 999;
  font-size: 100px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  position: absolute;
  padding-left: 20%;
  padding-right: 20%;
  padding-top: 20%;
}
@media only screen and (max-width: 800px) {
.carousel-caption {
  text-align: center;
  font-size: 20px;
  }
  }

Answer 1

您在字幕上有类 d-none d-md-block。这有效地将 display: none 来自 xs，然后 display: block 来自 md 及以上。删除所有 3 d-none，您的问题将得到解决。

变化：

<div class="carousel-caption d-none d-md-block">
    // caption
</div>

收件人：

<div class="carousel-caption">
    // caption
</div>

编辑：您实际上也不需要 d-md-block，因为该元素默认被阻止。

Bootstrap 5 当在较小的屏幕上查看网站时，轮播字幕文本消失

Bootstrap 5 carousel-caption text disappears when the website is seen on a smaller screen

html

css

twitter-bootstrap

bootstrap-4

bootstrap-5