Question

我目前正在为一家初创公司开发登陆页面，而我正在制作“英雄节”时我想使用轮播，一切正常，直到我尝试添加下一节，令我惊讶的是下一节是BEHIND在“英雄”部分，我尝试通读我的代码并在chrome开发工具上进行了一些调整，但我似乎找不到问题所在，您能帮我吗？

我尝试将轮播中所有项目的位置更改为静态，并阻止其显示以查看其是否恢复正常而没有成功。

代码：

HTML

<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>

CSS

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

下一小节（带有h2“ test”标签的小节）应位于下方，而不是另一小节的后面。

Answer 1

只需添加Bootstrap类clearfix，一切就好了！

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<section class="clearfix" 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="https://via.placeholder.com/960x500" 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="https://via.placeholder.com/960x500" alt="">
      </div>
      <div class="carousel-item" data-interval="8000">
        <img class="d-block w-100" src="https://via.placeholder.com/960x500" alt="">
      </div>
    </div>
  </section>

<section class="clearfix">
    <h2>Test</h2>
</section>

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>

引导轮播文件流出？

1 个答案: