Slick Carousel Slider overriding : Flex对齐问题

Question

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

不管怎样，我试着在Bootstrap中使用slick的旋转木马，每当我使用类的“slick-slider”时，我也需要类的“card-group”，底部的“添加到购物车”按钮和上面的按钮对齐不正确。

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

这是卡片组和卡片的代码片段：

<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实现的目标是：pic link

​

我不想要的不断发生的事情：pic2 link

​

提前感谢！

Answer 1

问题不在Slick或Bootstrap。您有两种类型的幻灯片，一张幻灯片，您在其中添加了3个元素：- div具有容器类- div，具有card-body - div类，具有card-footer类；在其他幻灯片中，您有第二种类型，其中还添加了3个元素：-2xdiv，具有card-body - div类，具有card-footer类

您的幻灯片高度来自其内容，并且由于card-body类具有不同的内容，因此整个幻灯片的高度会发生变化，因此您可以给card-body类一个固定的最小高度，以使所有其他幻灯片的高度保持不变，并为容器类提供相同的最小高度规则，以获得所有幻灯片的相同高度。我将这两条规则添加到此here中

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

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