Bootstrap CSS Carousel 浮动后不工作？

Question

我正在引导程序中实现轮播，但遇到两个问题。

1. 它没有水平对齐（我的 div 向下）。
2. 当我使用 float: left 属性时它不起作用。

我不明白我做错了什么。我尝试了多种方法来解决此问题，但似乎没有任何效果。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<section class="internships" id="internships">
  <div class="container headings text-center mt-4">
    <h1 class="text-center font-weight-bold font-size mb-4">
      Internships</h1>
  </div>
  <div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-inner">
      <div class="carousel-item active d-flex flex-row bd-highlight mb-3 ">
        <div class="row">
          <div class="col-lg-4 col-md-4 col-12">
            <div class="box">
              <a href="#"><img src="Images/IMG.jpg" alt="" srcset=""></a>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur error tempora maxime, suscipit dolorem asperiores ! </p>
            </div>
          </div>
        </div>
        <div class="row d-flex flex-row bd-highlight mb-3">
          <div class="col-lg-4 col-md-4 col-12 ">
            <div class="box">
              <a href="#"><img src="Images/IMG.jpg" alt="" srcset=""></a>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur error tempora maxime, suscipit dolorem asperiores ! </p>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-lg-4 col-md-4 col-12">
            <div class="box">
              <a href="#"><img src="Images/IMG.jpg" alt="" srcset=""></a>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur error tempora maxime, suscipit dolorem asperiores ! </p>
            </div>
          </div>
        </div>
      </div>
      <div class="carousel-item">
        <div class="row">
          <div class="col-lg-4 col-md-4 col-12">
            <div class="box">
              <a href="#"><img src="Images/IMG.jpg" alt="" srcset=""></a>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur error tempora maxime, suscipit dolorem asperiores ! </p>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-lg-4 col-md-4 col-12">
            <div class="box">
              <a href="#"><img src="Images/IMG.jpg" alt="" srcset=""></a>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur error tempora maxime, suscipit dolorem asperiores ! </p>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-lg-4 col-md-4 col-12">
            <div class="box">
              <a href="#"><img src="Images/IMG.jpg" alt="" srcset=""></a>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur error tempora maxime, suscipit dolorem asperiores ! </p>
            </div>
          </div>
        </div>
      </div>
      <div class="carousel-item">
        <div class="row">
          <div class="col-lg-4 col-md-4 col-12">
            <div class="box">
              <a href="#"><img src="Images/IMG.jpg" alt="" srcset=""></a>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur error tempora maxime, suscipit dolorem asperiores ! </p>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-lg-4 col-md-4 col-12">
            <div class="box">
              <a href="#"><img src="Images/IMG.jpg" alt="" srcset=""></a>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur error tempora maxime, suscipit dolorem asperiores ! </p>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-lg-4 col-md-4 col-12">
            <div class="box">
              <a href="#"><img src="Images/IMG.jpg" class="img-fluid" srcset=""></a>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur error tempora maxime, suscipit dolorem asperiores ! </p>
            </div>
          </div>
        </div>
      </div>
      <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next"></button>
      </div>
    </div>
</section>

Answer 1

这是你想要的吗？

如果是，那么您必须处理一些初始引导程序类来找到解决 active 类的方法。

为什么？

当您想使用row（它使用display : flex）时，active 类传递display : block 上的元素。因此，每次您的项目为 active 时，它都会返回为 block 并设置垂直。

然后，当您使用 按钮 时，它将触发 carousel.item-next / carousel.item-prev 类，它们还使用... display : block ！因此，您还需要将它们更改为 display : flex。

---

这就是您在 CSS 中所需要的：

.carousel-item.active{
    display: flex;
}
.carousel-item-next{
    display: flex;
}
.carousel-item-prev{
    display: flex;
}

---

然后你需要处理你的HTML：

您需要将 carousel-item 类更改为：<div class="carousel-item active row">

在该行内，必须使用引导程序中的宽度/列设置子级。如：<div class="col-3>（如果你想让它使用旋转木马的四分之一 - 这是我在上面的图像上使用的）

最后，这是一张说明 HTML 部分的图片，您需要为您将要使用的每张幻灯片重复 HTML：