Slick Carousel Slider 覆盖 Bootstrap：Flex 对齐问题 [重复]

Question

这是我正式提出的第一个问题。我花了将近一天的时间试图弄清楚这一点，所以如果有人可以帮助我，我将不胜感激！ :D

无论如何，我正在尝试将 Slick 的轮播与 Bootstrap 一起使用，并且每当我在需要“card-group”类的地方使用“slick-slider”类时，底部“添加到购物车”按钮的对齐方式和上面的按钮没有正确对齐。

<div class='slick-slider card-group'>

这是卡片组和卡片的代码sn-p：

<section id="slick-slider" class="py-5 med-1">

    <div class='slick-slider card-group'>

      <div class="card border-0" style="width: 18rem;">
        <img class="card-img-top" src="static/img/person1.jpg" alt="Card image cap">
        <div class="card-body d-flex flex-column">
          <h5 class="card-title sm-1">Lorem.</h5>
          <p class="card-text sm-2">Lorem ipsum dolor sit amet.</p>
          <p class="card-text text-primary sm-3">Lorem.</p>
        </div>
        <div class="card-footer d-flex flex-column mt-auto">
          <p class="text-muted small mb-0">Select:</p>
          <div class="clearfix mb-2">
            <button type="button" class="btn btn-outline-danger px-2 py-0 mb-1"><span class="small">4</span><br>$80</button>
              <button type="button" class="btn btn-outline-danger px-2 py-0 mb-1"><span class="small">3</span><br>$50</button>
              <button type="button" class="btn btn-outline-danger px-2 py-0 mb-1"><span class="small">2</span><br>$30</button>
              <button type="button" class="btn btn-outline-danger px-2 py-0 mb-1"><span class="small">1</span><br>$20</button>
          </div>
          <a href="#" class="btn btn-primary">Add to Cart</a>
        </div>
      </div>

      <div class="card border-0" style="width: 18rem;">
        <img class="card-img-top" src="static/img/person2.jpg" alt="Card image cap">
        <div class="card-body d-flex flex-column">
          <h5 class="card-title sm-1">Lorem ipsum.</h5>
          <p class="card-text sm-2">Lorem ipsum dolor.</p>
          <p class="card-text text-primary sm-3">Lorem ipsum.</p>
        </div>
        <div class="card-footer d-flex flex-column mt-auto">
          <p class="text-muted small mb-0">Select:</p>
          <div class="clearfix mb-2">
            <button type="button" class="btn btn-outline-danger px-2 py-0 mb-1"><span class="small">4</span><br>$80</button>
              <button type="button" class="btn btn-outline-danger px-2 py-0 mb-1"><span class="small">3</span><br>$50</button>
              <button type="button" class="btn btn-outline-danger px-2 py-0 mb-1"><span class="small">2</span><br>$30</button>
              <button type="button" class="btn btn-outline-danger px-2 py-0 mb-1"><span class="small">1</span><br>$20</button>
          </div>
          <a href="#" class="btn btn-primary">Add to Cart</a>
        </div>

      </div>
      <div class="card border-0" style="width: 18rem;">
        <img class="card-img-top" src="static/img/person3.jpg" alt="Card image cap">
        <div class="card-body d-flex flex-column">
          <h5 class="card-title sm-1">Lorem ipsum dolor.</h5>
          <p class="card-text sm-2">Lorem ipsum dolor sit.</p>
          <p class="card-text text-primary sm-3">Lorem.</p>
        </div>
        <div class="card-footer d-flex flex-column mt-auto">
          <p class="text-muted small mb-0">Select:</p>
          <div class="clearfix mb-2">
            <button type="button" class="btn btn-outline-danger px-2 py-0 mb-1"><span class="small">4</span><br>$80</button>
              <button type="button" class="btn btn-outline-danger px-2 py-0 mb-1"><span class="small">3</span><br>$50</button>
              <button type="button" class="btn btn-outline-danger px-2 py-0 mb-1"><span class="small">2</span><br>$30</button>
              <button type="button" class="btn btn-outline-danger px-2 py-0 mb-1"><span class="small">1</span><br>$20</button>
          </div>
          <a href="#" class="btn btn-primary">Add to Cart</a>
        </div>
      </div>
      <div class="card border-0" style="width: 18rem;">
        <img class="card-img-top" src="static/img/person4.jpg" alt="Card image cap">
        <div class="card-body d-flex flex-column">
          <h5 class="card-title sm-1">Lorem ipsum.</h5>
          <p class="card-text sm-2">Lorem ipsum dolor.</p>
          <p class="card-text text-primary sm-3">Lorem.</p>
        </div>
        <div class="card-footer d-flex flex-column mt-auto">
          <p class="text-muted small mb-0">Select:</p>
          <div class="clearfix mb-2">
            <button type="button" class="btn btn-outline-danger px-2 py-0 mb-1"><span class="small">4</span><br>$80</button>
              <button type="button" class="btn btn-outline-danger px-2 py-0 mb-1"><span class="small">3</span><br>$50</button>
              <button type="button" class="btn btn-outline-danger px-2 py-0 mb-1"><span class="small">2</span><br>$30</button>
              <button type="button" class="btn btn-outline-danger px-2 py-0 mb-1"><span class="small">1</span><br>$20</button>
          </div>
          <a href="#" class="btn btn-primary">Add to Cart</a>
        </div>

      </div>





    </div>


</section>

下面是带有 slick-slider 类的图片和没有（都带有卡片组）的图片。

我想通过 Slick 实现的目标： pic link

我不希望发生的事情不断发生： pic2 link

提前致谢！

Answer 1

问题不在于 Slick 或 Bootstrap。 您有 2 种类型的幻灯片，其中添加了 3 个元素的幻灯片： - 带有一类容器的 div - 具有卡体类的 div - 带有卡片页脚类的 div 在其他幻灯片中，您还有第二种类型，您还添加了 3 个元素： - 2xdivs 与一类卡体 - 带有卡片页脚类的 div

您的幻灯片高度来自其内容，并且由于卡片主体类的内容与幻灯片不同，因此整个幻灯片的高度会发生变化，因此您可以为卡片主体类提供固定的最小高度以保持幻灯片高度固定沿着所有其他幻灯片，并为容器类提供相同的最小高度规则，以获得所有幻灯片的相同高度。 我在here

中添加了这两条规则

 min-height:12em;
 height: 100%;

根据幻灯片的最大高度更改min-height。