Bootstrap 5 轮播导航按钮失效及模态框关闭按钮渲染异常求助

问题1：轮播前后导航按钮失效 #

你使用的是Bootstrap 5，但轮播控制按钮上的属性还是旧版本的data-slide，Bootstrap 5所有的data属性都添加了bs-前缀，需要把data-slide改成data-bs-slide。

问题2：模态框关闭按钮渲染异常 #

同样是版本属性不匹配导致的问题：

• 关闭按钮的类需替换为Bootstrap 5的btn-close，而非旧版的close
• 关闭触发属性要改成data-bs-dismiss="modal"，不再使用data-dismiss="modal"
• btn-close类自带关闭图标样式，无需手动写×

修正后的完整代码 #

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" rel="stylesheet">

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>

<div class="row">
  <div class="col-md-6">
    <div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
      <div class="carousel-inner">
        <div class="carousel-item">
          <img src="https://via.placeholder.com/640x480.png/0088ff?text=animals+ratione" class="d-block w-100" alt="ab natus nemo">
        </div>
        <div class="carousel-item">
          <img src="https://via.placeholder.com/640x480.png/009999?text=animals+illum" class="d-block w-100" alt="ab natus nemo">
        </div>
        <div class="carousel-item active">
          <img src="https://via.placeholder.com/640x480.png/007766?text=animals+dignissimos" class="d-block w-100" alt="ab natus nemo">
        </div>
        <div class="carousel-item ">
          <img src="https://via.placeholder.com/640x480.png/0077aa?text=animals+ad" class="d-block w-100" alt="ab natus nemo">
        </div>
        <div class="carousel-item ">
          <img src="https://via.placeholder.com/640x480.png/0000aa?text=animals+totam" class="d-block w-100" alt="ab natus nemo">
        </div>
        <div class="carousel-item ">
          <img src="https://via.placeholder.com/640x480.png/000022?text=animals+et" class="d-block w-100" alt="ab natus nemo">
        </div>
        <div class="carousel-item ">
          <img src="https://via.placeholder.com/640x480.png/0066ee?text=animals+sed" class="d-block w-100" alt="ab natus nemo">
        </div>
        <div class="carousel-item ">
          <img src="https://via.placeholder.com/640x480.png/00dd33?text=animals+neque" class="d-block w-100" alt="ab natus nemo">
        </div>
      </div>
      <!-- 修正轮播控制属性 -->
      <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-bs-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="#carouselExampleControls" role="button" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
  </div>
  <div class="col-md-6">
    <h3>ab natus nemo</h3>
    <p>Architecto corrupti nulla dolorum sint. Rerum consequatur quidem et autem nobis qui. Hic fugiat voluptate dignissimos sed officia in odio.</p>
    <h4>$5.99</h4>
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#buyModal">
      Buy
    </button>
  </div>
</div>

<div class="modal fade" id="buyModal" tabindex="-1" aria-labelledby="buyModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="buyModalLabel">Buy: ab natus nemo</h5>
        <!-- 修正模态框关闭按钮 -->
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>You are about to purchase for $5.99.</p>
        <form method="POST" action="">
          <input type="hidden" name="_token" value="m46pmcbo0G2yuMVNyfwpcY07AomhmCY5AD2OixFy"> 
          <button type="submit" class="btn btn-primary">Confirm</button>
        </form>
      </div>
    </div>
  </div>
</div>

内容的提问来源于stack exchange，提问作者Carol.Kar