Bootstrap Carousel失效求助：图片与标题堆叠显示

嘿，我一眼就看出问题所在了——你写的是Bootstrap 3版本的Carousel代码，但用的是Bootstrap 4（从引入的jQuery 3.2.1和popper.js能看出来，这俩是Bootstrap 4的核心依赖），类名完全不匹配，这才导致布局错乱！

下面是具体的修复步骤，跟着改就行：

1. 修正轮播项的类名 #

Bootstrap 4里，轮播的每一项不再用item类，而是要改成carousel-item，激活状态的active也要绑定在这个类上：

<!-- 修改前 -->
<div class="item active">
<!-- 修改后 -->
<div class="carousel-item active">

注意所有轮播项都要改，不能只改第一个。

2. 替换轮播控制按钮的类名与图标 #

Bootstrap 4重构了控制按钮的类名，同时弃用了glyphicon图标（换成了内置的SVG图标类）：

<!-- 修改前的上一页按钮 -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">
  <span class="glyphicon glyphicon-chevron-left"></span>
</a>
<!-- 修改后 -->
<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
  <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  <span class="sr-only">Previous</span>
</a>

<!-- 修改前的下一页按钮 -->
<a class="carousel-control right" href="#myCarousel" data-slide="next">
  <span class="glyphicon glyphicon-chevron-right"></span>
</a>
<!-- 修改后 -->
<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
  <span class="carousel-control-next-icon" aria-hidden="true"></span>
  <span class="sr-only">Next</span>
</a>

这里额外加了role和sr-only标签，让组件更符合无障碍标准。

3. 检查自定义CSS的干扰 #

打开你的styles.css，看看有没有写过以下可能破坏Carousel布局的样式：

• 给.carousel-inner或.carousel-item设置了position: static（Bootstrap默认用position: relative来定位标题）
• 给图片设置了display: block以外的属性，或者强制修改了图片宽高导致溢出
• 给.carousel-caption设置了错误的定位属性

如果有，直接删除或者调整这些样式。

修复后的完整轮播代码 #

<section class="slider-menu">
  <!--Image slider & aside of the menu buttons-->
  <aside class="side-menu">
    <a href="#"><img src="http://via.placeholder.com/50x50" alt="">Book</a>
    <a href="#"><img src="http://via.placeholder.com/50x50" alt="">Portfolio</a>
    <a href="#"><img src="http://via.placeholder.com/50x50" alt="">What to expect</a>
    <a href="#"><img src="http://via.placeholder.com/50x50" alt="">Services</a>
  </aside>
  <div id="myCarousel" class="carousel slide" data-interval="3000" data-ride="carousel">
    <!-- Carousel indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>
    <!-- Carousel items -->
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img src="img/placeholder-img.jpg" alt="First Slide">
        <div class="carousel-caption">
          <h3>First slide label</h3>
          <p>Lorem ipsum dolor sit amet...</p>
        </div>
      </div>
      <div class="carousel-item">
        <img src="img/placeholder-img.jpg" alt="Second Slide">
        <div class="carousel-caption">
          <h3>Second slide label</h3>
          <p>Aliquam sit amet gravida nibh, facilisis...</p>
        </div>
      </div>
      <div class="carousel-item">
        <img src="img/placeholder-img.jpg" alt="Third Slide">
        <div class="carousel-caption">
          <h3>Third slide label</h3>
          <p>Praesent commodo cursus magna vel...</p>
        </div>
      </div>
    </div>
    <!-- Carousel nav -->
    <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</section>

改完这些，刷新页面应该就能正常显示了——轮播图和标题会按预期分层，控制按钮也能正常工作。

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