当在较小的屏幕上看到网站时，Bootstrap 5 轮播标题文本消失答案

【问题标题】：Bootstrap 5 carousel-caption text disappears when the website is seen on a smaller screen当在较小的屏幕上看到网站时，Bootstrap 5 轮播标题文本消失
【发布时间】：2022-01-25 19:03:23
【问题描述】：

我正在使用引导轮播代码。我的轮播文本在常规尺寸上看起来不错，但在较小尺寸的屏幕上会消失。似乎文字在图像后面。我尝试使用 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;
  }
  }

【问题讨论】：

标签： html css twitter-bootstrap bootstrap-4 bootstrap-5

【解决方案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，因为默认情况下该元素被阻止。

【讨论】：