Html 引导转盘脱离文档流？

我目前正在为一家初创公司开发一个登录页，当我制作我想使用旋转木马的“英雄部分”时，一切正常，直到我尝试添加下一个部分，令我惊讶的是，下一个部分在英雄部分后面，我试着通读我的代码，在chrome开发工具上做了一些调整，但我似乎找不到问题，你能帮我吗

我已尝试将旋转木马中所有项目的位置更改为静态，并将其显示更改为阻止，以查看它是否恢复正常，但没有成功

代码：

HTML

---

下一部分（带有h2“test”标记的部分）应该在另一部分的下方而不是后面。

只需添加引导类

clearfix

，就可以开始了

.carousel项目img{
高度：500px；
对象匹配：覆盖；
}

阿尔坎扎·图斯苏尼奥斯酒店
阿塞莱拉·阿塞莱拉·阿塞莱雷斯·阿塞莱拉·阿塞莱拉·阿塞莱拉·阿塞莱拉·阿塞莱雷斯·阿塞莱拉·阿塞莱拉·阿塞莱拉·阿塞莱拉·阿塞莱德·阿塞莱拉·阿塞莱拉·阿塞莱拉

克雷迪托律师事务所
试验

只需添加引导类

clearfix

，就可以开始了

.carousel项目img{
高度：500px；
对象匹配：覆盖；
}

阿尔坎扎·图斯苏尼奥斯酒店
阿塞莱拉·阿塞莱拉·阿塞莱雷斯·阿塞莱拉·阿塞莱拉·阿塞莱拉·阿塞莱拉·阿塞莱雷斯·阿塞莱拉·阿塞莱拉·阿塞莱拉·阿塞莱拉·阿塞莱德·阿塞莱拉·阿塞莱德·阿塞莱拉·阿塞莱拉·阿塞莱拉·阿塞莱德·阿塞莱拉·阿塞莱拉·阿塞莱拉·阿塞莱拉·阿塞莱德·阿塞莱拉·阿塞莱

克雷迪托律师事务所
试验

<section id='hero-section'>
    <div class="hero-carousel carousel slide" data-ride="carousel">
      <div class="carousel-item active" data-interval="8000">
        <img class="d-block w-100" src="includes/media/images/slide1.png" alt="">
        <div class="carousel-caption d-none d-md-block">
          <h2>Alcanza tus sueños</h2>
          <p>Los créditos de nómina Axelera son fáciles de obtener y de pagar</p>
          <button class='cta-button btn btn-md' type="button" name="button">Solicita tu crédito</button>
        </div>
      </div>
      <div class="carousel-item" data-interval="8000">
        <img class="d-block w-100" src="includes/media/images/slide2.png" alt="">
      </div>
      <div class="carousel-item" data-interval="8000">
        <img class="d-block w-100" src="includes/media/images/slide3.png" alt="">
      </div>
    </div>
  </section>

<section>
    <h2>Test</h2>
</section>

.carousel-item img{
height: 500px;
object-fit: cover;
}