Bootstrap 列不在一行中

Question

此代码的结果是列不在一行中。我在本节中使用 Slick。谁能告诉我为什么？

这些幻灯片就是我要幻灯片的东西。

<div class="col-12">
  <div data-aos="fade-right" class="first-slider pt-5">
      <!--Slide 1-->
      <div class="row align-items-center">
        <div class="col-md-7 col-12"><img src="https://via.placeholder.com/500x300" class="img-fluid"></div>
        <div class="col-md-5 col-12 order-md-last order-first desktop-section">
          <h1 class="heading3 mb-3 text-white">Test 1</h1>
          <p>Lorem ipsum dolor sit</p>
        </div>
      </div>

      <!--Slide 2-->
      <div class="row align-items-center">
        <div class="col-md-7 col-12"><img src="https://via.placeholder.com/500x300" class="img-fluid"></div>
        <div class="col-md-5 col-12 order-md-last order-first desktop-section">
          <h1 class="heading3 mb-3 text-white">Test 2</h1>
          <p>Lorem ipsum dolo</p>
        </div>
      </div>

      <!--Slide 3-->
      <div class="row align-items-center">
        <div class="col-md-5 col-12"><img src="https://via.placeholder.com/500x300" class="img-fluid"></div>
        <div class="col-md-5 col-12 order-md-last order-first desktop-section">
          <h1 class="heading3 mb-3 text-white">Test 3</h1>
          <p>Lorem ipsum</p>
        </div>
      </div>
  </div>
</div>

这里是 slick 的 JS

//slick
$('.first-slider').slick({
    dots: true,
    appendDots: $('.slick-slider-dots'),
    prevArrow: $('.slick-prev'),
    nextArrow: $('.slick-next'),
})