Bootstrap轮播组件按钮失效且样式异常问题求助

问题描述 #

学习Angela Yu的Web开发课程时编写Bootstrap轮播组件，代码在Codeply运行正常，但整合到自身HTML后，next和previous按钮完全失去切换功能，同时按钮出现异常的边框和背景样式：

核心原因 #

加载的是Bootstrap 4版本的CSS和JS资源，但编写的是Bootstrap 5的轮播HTML结构，两者的属性命名与组件规范不兼容：

• Bootstrap 5 使用data-bs-*前缀的属性（如data-bs-ride、data-bs-target），而Bootstrap 4使用不带bs前缀的data-*属性
• 两者的轮播控制按钮标签、辅助文本类名（visually-hidden vs sr-only）也存在差异，直接导致样式失效

解决方案 #

两种修复方式二选一即可：

方式1：升级资源到Bootstrap 5 #

替换HTML头部的Bootstrap引用为5.x版本（Bootstrap 5不再依赖jQuery）：

<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap 5 JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

方式2：适配HTML代码到Bootstrap 4规范 #

修改轮播相关属性和结构，匹配Bootstrap 4的要求：

<div id="testimonial-carousel" class="carousel slide" data-ride="false">
  <div class="carousel-inner">
    <!-- 轮播项内容保持不变 -->
  </div>
  <a class="carousel-control-prev" href="#testimonial-carousel" 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="#testimonial-carousel" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

关键修改点：

• 将data-bs-ride改为data-ride
• 把按钮从<button>改为<a>标签，用href指定轮播容器ID
• 替换visually-hidden为Bootstrap 4的sr-only类
• 移除data-bs-target，改用href关联轮播容器

完整修复后的代码示例（Bootstrap 4适配版） #

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Title</title>
  <!-- jQuery -->
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
    integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
    crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js"
    integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
    crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js"
    integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
    crossorigin="anonymous"></script>

  <!-- Bootstrap 4 CSS -->
  <link rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"
    integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
    crossorigin="anonymous" />

  <!-- External CSS -->
  <link rel="stylesheet" href="css/styles.css" />

  <!--  Google fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link
    href="https://fonts.googleapis.com/css2?family=Jost:wght@400;700&family=Montserrat:wght@300;400;700;900&family=Open+Sans:wght@400;700&family=Ubuntu:wght@400;700&display=swap"
    rel="stylesheet">
    
  <!-- Font awesome -->
  <script src="https://kit.fontawesome.com/3f441d9c50.js" crossorigin="anonymous"></script>
</head>
<body>
<section id="testimonials">
<div id="testimonial-carousel" class="carousel slide" data-ride="false">
      <div class="carousel-inner">
        <div class="carousel-item active">
          <h2> I no longer have to sniff other dogs for love. I've found the hottest Corgi on
            TinDog. Woof. </h2>
          <img class="testimonial-image" src="images/dog-img.jpg" alt="dog-profile" />
          <em>Pebbles, New York</em>
        </div>
        <div class="carousel-item">
          <h2 class="testimonial-text">My dog used to be so lonely, but with TinDog's help, they've
            found the love of their life. I think.</h2>
          <img class="testimonial-image" src="images/lady-img.jpg" alt="lady-profile">
          <em>Beverly, Illinois</em>
        </div>
      </div>
      <a class="carousel-control-prev" href="#testimonial-carousel" 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="#testimonial-carousel" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
</section>
</body>
</html>

内容的提问来源于stack exchange，提问作者Utku Orçan