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

Question

我正在使用引导轮播代码。我的轮播文本在常规尺寸上看起来不错，但在较小尺寸的屏幕上看到时它就消失了。看起来文字已经隐藏在图像后面了。我尝试过使用 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

，因为默认情况下该元素是被阻止的。

Answer 2

我的主页中有这个 Bootstrap、Google Fonts 和其他样式代码：

<!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@400;700&display=swap" rel="stylesheet">
<style>
        .carousel-caption {
            bottom: 50%; /* Vertically centers the text */
            transform: translateY(50%); /* Adjusts the           translation to fully center */
            text-align: center; /* Horizontally centers the text */
        }
    .carousel-caption h5, .carousel-caption p {
      font-family: 'Oswald', sans-serif; /* Using Google Font */
      font-weight: bold; /* Makes text bold */
      color: rgba(255, 240, 240, 0.9);
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 1.0); /* Adds   shadow to the text */
    }

    .carousel-caption p {
       font-size: 1.0rem; /* Adjust font size as needed */
    }
    </style>

就我而言，我确实需要在每个轮播项目的描述文本中保留

d-md-block

。 因此，首先尝试仅删除

d-none

可能是个好主意。