Bootstrap 5 图文并排轮播问题：非激活Slide 3始终置顶

问题说明 #

使用Bootstrap 5创建自定义轮播，要求每个幻灯片内文本与图片并排显示。当前幻灯片布局正常，但Slide 3即使处于非激活状态，也始终显示在所有幻灯片的顶层。需要在不使用JavaScript的前提下解决该问题，适配jQuery 4.0+和Bootstrap 5（用于Drupal 11网站）。

问题原因 #

Bootstrap 5默认通过opacity属性控制轮播项的显示/隐藏，而非直接设置display: none。自定义CSS中给.carousel-item添加了display: flex，导致DOM结构中最后一个轮播项（Slide 3）在视觉层级上默认高于前面的项，即使非激活状态也会覆盖其他幻灯片。

修复方案 #

通过CSS层级（z-index）控制，让激活状态的幻灯片拥有更高层级，非激活状态的幻灯片层级降低，即可解决覆盖问题。

修改后的完整代码 #

CSS 代码

.carousel-item {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f8f9fa;
  /* 增加层级控制基础值 */
  position: relative;
}

/* 激活的幻灯片层级更高 */
.carousel-item.active {
  z-index: 1;
}

/* 非激活的幻灯片层级降低 */
.carousel-item:not(.active) {
  z-index: 0;
}

.carousel-item .item {
  display: flex;
  width: 100%;
}

.carousel-item .text,
.carousel-item .image {
  padding: 15px;
}

.carousel-item .text {
  flex: 1;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 20px;
}

.carousel-item .image img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.carousel-caption {
  display: none;
}

@media (max-width: 768px) {
  .carousel-item .item {
    flex-direction: column;
  }

  .carousel-item .image img {
    max-height: 300px;
  }
}

HTML 代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
  <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
</head>

<body>
  <div class="container mt-4">
    <div id="carouselExample" class="carousel slide" data-bs-ride="carousel">
      <div class="carousel-inner">
        <!-- Slide 1 -->
        <div class="carousel-item active">
          <div class="item">
            <div class="text col-md-6">
              <p>Slide 1: Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perspiciatis a modi repellat eaque voluptatibus repellendus veniam quia! Et recusandae quam inventore atque sapiente eius minus quaerat, perferendis, magnam ex fugit.</p>
            </div>
            <div class="image col-md-6">
              <img src="https://i.ibb.co/39dVTpfY/banner-600300.png" alt="">
            </div>
          </div>
        </div>
        
        <!-- Slide 2 -->
        <div class="carousel-item">
          <div class="item">
            <div class="text col-md-6">
              <p>Slide 2: Description for Slide 2 goes here...</p>
            </div>
            <div class="image col-md-6">
              <img src="https://i.ibb.co/39dVTpfY/banner-600300.png" alt="Slide 2">
            </div>
          </div>
        </div>
        
        <!-- Slide 3 -->
        <div class="carousel-item">
          <div class="item">
            <div class="text col-md-6">
              <p>Slide 3: Description for Slide 3 goes here...</p>
            </div>
            <div class="image col-md-6">
              <img src="https://i.ibb.co/39dVTpfY/banner-600300.png" alt="Slide 3">
            </div>
          </div>
        </div>
      </div>
      
      <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" 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="#carouselExample" data-bs-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Next</span>
      </button>
            
      <div class="carousel-indicators">
        <button type="button" data-bs-target="#carouselExample" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
        <button type="button" data-bs-target="#carouselExample" data-bs-slide-to="1" aria-label="Slide 2"></button>
        <button type="button" data-bs-target="#carouselExample" data-bs-slide-to="2" aria-label="Slide 3"></button>
      </div>
    </div>
  </div>

  <footer class="bg-dark text-white text-center py-3 mt-4">
    <p>&copy; 2025 My Site. All rights reserved.</p>
  </footer>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>

说明 #

• 给.carousel-item添加position: relative是为了让z-index属性生效
• 通过.carousel-item.active设置更高层级，确保激活的幻灯片始终显示在顶层
• 非激活的幻灯片通过.carousel-item:not(.active)设置较低层级，避免覆盖激活的幻灯片

内容的提问来源于stack exchange，提问作者Finduilas