Начальная загрузка карусели из потока документов?

Question

В настоящее время я разрабатываю целевую страницу для стартапа, в то время как я делал «раздел героя», я хотел использовать карусель, все работало нормально, пока я не попытался добавить следующий раздел, к моему удивлению, следующий раздел был ЗАКРЫТВ разделе, посвященном героям, я попытался прочитать свой код и немного настроить инструменты 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>