光滑的轮播滑块覆盖自举程序：Flex对齐问题

时间：2018-08-09 21:17:42

标签： jquery css twitter-bootstrap bootstrap-4 slick.js

这是我正式问的第一个问题。我花了将近一天的时间试图解决这个问题，所以如果有人可以帮助我，我将非常感激！ ：D

无论如何，我试图在Bootstrap中使用Slick的轮播，每当我在需要“卡组”类的“ slick-slider”类中使用时，底部的“添加到购物车”按钮和上面的按钮无法正确对齐。

<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 enter image description here

我不希望发生的事情： pic2 link enter image description here

谢谢！

1 个答案:

答案 0 :(得分：0)

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

您的幻灯片高度取决于它们的内容，并且由于卡体类别的内容与幻灯片的内容不同，因此整个幻灯片的高度都会发生变化，因此您可以为卡体类别指定固定的最小高度，以保持幻灯片高度固定沿所有其他幻灯片滑动，并向容器类赋予相同的最小高度规则，以使所有幻灯片均具有相同的高度。 我在这here

中添加了这2条规则 
 min-height:12em;
 height: 100%;

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

相关问题
最新问题