1

我目前正在为一家初创公司开发一个登陆页面，当我在制作“英雄部分”时，我想使用轮播，一切正常，直到我尝试添加下一个部分，令我惊讶的是，下一个部分在英雄部分的后面，我尝试通读我的代码并在 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”标签的部分）应该在另一部分的下方而不是后面。

4

1 回答 1

0

只需添加 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>

于 2019-02-01T21:17:59.033 回答