Bootstrap carousel箭头导航切换不显示第二张轮播项问题

云原生阿岚

2026-8-30

问题根源

第二张幻灯片无法渲染和外层flex布局无关，核心是HTML标签嵌套错误：第二个.carousel-item被错误写在了第一个带active类的.carousel-item内部，没有成为.carousel-inner的直接子元素。
Bootstrap 4的Carousel组件识别轮播项的规则是：所有.carousel-item必须是.carousel-inner的直接子节点，嵌套在其他轮播项内部的内容不会被组件初始化，切换时对应区域就会显示空白。

修复方案

调整标签闭合位置，把第二个.carousel-item移到第一个轮播项的外面，和第一个active轮播项保持平级，同属.carousel-inner的直接子元素即可。
修正后的轮播内部核心代码如下：

<div id="carouselExampleIndicators2" class="carousel slide" data-ride="carousel" data-interval="false">
  <div class="carousel-inner">
    <!-- 第一张轮播项：carousel-inner直接子元素 -->
    <div class="carousel-item active">
      <div class="column">
        <article class="card">
          <h3 class="pink">TRAVEL</h3>
          <h3 class="article-title">Article title</h3>
          <p>Lorem ipsum dolor sit amet, ipsum labitur lucilius mel id, ad has appareat…</p>
          <i class="fa-regular fa-clock"></i>
          <span>2 mins ago</span>
        </article>
        <article class="card">
          <h3 class="pink">TECHNOLOGY</h3>
          <h3 class="article-title">Article title</h3>
          <p>Lorem ipsum dolor sit amet, ipsum labitur lucilius mel id, ad has appareat…</p>
          <i class="fa-regular fa-clock"></i>
          <span>2 mins ago</span>
        </article>
      </div>
    </div>
    <!-- 第二张轮播项：和第一张平级，同为carousel-inner直接子元素 -->
    <div class="carousel-item">
      <div class="column">
        <article class="card">
          <h3 class="pink">TRAVEL</h3>
          <h3 class="article-title">Article title</h3>
          <p>Lorem ipsum dolor sit amet, ipsum labitur lucilius mel id, ad has appareat…</p>
          <i class="fa-regular fa-clock"></i>
          <span>2 mins ago</span>
        </article>
        <article class="card">
          <h3 class="pink">TECHNOLOGY</h3>
          <h3 class="article-title">Article title</h3>
          <p>Lorem ipsum dolor sit amet, ipsum labitur lucilius mel id, ad has appareat…</p>
          <i class="fa-regular fa-clock"></i>
          <span>2 mins ago</span>
        </article>
      </div>
    </div>
  </div>
</div>

补充说明

现有flex布局相关CSS不需要修改，外层flex容器不会干扰轮播组件的正常运行。
后续新增轮播项时，保持所有.carousel-item和现有项平级，不要嵌套在其他轮播项内部即可避免同类问题。

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