在引导程序 5 中获取轮播上一个和下一个按钮的框，并且这些按钮不起作用答案

【问题标题】：Getting boxes over carousel pervious and next buttons in bootstrap 5, and the buttons are not working在引导程序 5 中获取轮播上一个和下一个按钮的框，并且这些按钮不起作用
【发布时间】：2021-12-31 19:07:35
【问题描述】：

我正在尝试实现一个教程类项目，该项目使用 bootstrap5 轮播上一个和下一个滑动按钮。如果我执行此操作，我会在按钮上出现框并且按钮不起作用。 enter image description here

<section id="testimonials">

  <div id="testimonial-carousel" class="carousel slide" data-bs-ride="carousel" data-bs-interval="1000">
    <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>
    <button class="carousel-control-prev" type="button" data-bs-target="#testimonial-carousel" data-bs-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="visually-hidden"></span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#testimonial-carousel" data-bs-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="visually-hidden"></span>
    </button>
  </div>

</section>

【问题讨论】：

我使用您的代码 (jsfiddle.net/deathstalkersid/3zcs7uxa/1) 做了一个小提琴，除了标题和图像格式，控件上方没有框。也许您的自定义样式中的其他内容会覆盖按钮 css。如果您修改了整个代码，我们可以调试。

标签： html bootstrap-5

【解决方案1】：

您错过了将d-block w-100 添加到img 选择器，我认为您没有正确连接bootstrap-5。我做了一些改变，它就像一个魅力;-)

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

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

  <title>Hello, world! Bootstrap 5 Carousel!</title>
</head>

<body>

  <div id="testimonial-carousel" class="carousel slide" data-bs-ride="carousel" data-bs-interval="5000">
    <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 d-block w-100" src="https://images.unsplash.com/photo-1534972195531-d756b9bfa9f2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTF8fGNvZGV8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60" 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 d-block w-100" src="https://images.unsplash.com/photo-1564865878688-9a244444042a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8Y29kZXxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60" alt="lady-profile">
        <em>Beverly, Illinois</em>

      </div>

    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#testimonial-carousel" data-bs-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="visually-hidden"></span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#testimonial-carousel" data-bs-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="visually-hidden"></span>
    </button>
  </div>
  <!-- Option 1: Bootstrap Bundle with Popper -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

</body>

</html>

【讨论】：

现在代码正在运行，但我仍然在按钮上看到框。