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

Posted 2023-03-05

【中文标题】Slick Carousel Slider 覆盖 Bootstrap：Flex 对齐问题 [重复]

【英文标题】：Slick Carousel Slider overriding Bootstrap: Flex alignment issue [duplicate]

【发布时间】：2019-01-17 10:38:18

【问题描述】：

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

提前致谢！

【参考方案1】：

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

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

中添加了这两条规则

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

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

【讨论】：

不幸的是，这不起作用。不过，我仍然很好奇，试图找出最好的故障排除方法，因为我已经尝试了我可以搜索的每个线程中的所有内容。为什么当我从 div 中禁用类 'slick-slider' 'card- group' 突然按照我想要的方式对齐所有内容？ :(

好的，你能提供一个codepen的链接吗？我们可以找到解决方案

对延迟回复表示歉意。所以我花了一点时间尝试在 codepen 中重新创建问题，但这里是链接：codepen.io/devbaggett/pen/GXJvLB