Css 光滑转盘内的等高引导卡

我很难用光滑的旋转木马获得具有不同长度主体内容的等高引导卡。我在这里看到了类似的答案，但在我的场景中，它们似乎都不起作用

我成功地获得了等高幻灯片，但由于某些原因，我无法使幻灯片中的卡片达到幻灯片的100%高度（父容器）。我试图实现引导类“card deck”所实现的功能，但它是在一个旋转木马中实现的

HTML

<div class="container">
        <div class="row">
            <div class="col-10 mx-auto s_container">
                <div class="slider">
                    <div class="card">
                        <img class="card-img-top" src="img-ph.jpg" alt="place holder">
                        <div class="card-body">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptates, rem?</div>
                        <div class="card-footer">
                            <a href="#" class="btn btn-primary">More Info</a>
                        </div>
                    </div>
                    <div class="card">
                        <img class="card-img-top" src="img-ph.jpg" alt="place holder">
                        <div class="card-body">Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem, quasi soluta dolorum pariatur hic porro.</div>
                        <div class="card-footer">
                            <a href="#" class="btn btn-primary">More Info</a>
                        </div>
                    </div>
                    <div class="card">
                        <img class="card-img-top" src="img-ph.jpg" alt="place holder">
                        <div class="card-body">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto magnam esse molestiae est. Nisi aliquam libero dolorem? Qui, enim nam.</div>
                        <div class="card-footer">
                            <a href="#" class="btn btn-primary">More Info</a>
                        </div>
                    </div>
                    <div class="card">
                        <img class="card-img-top" src="img-ph.jpg" alt="place holder">
                        <div class="card-body">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptates, rem?</div>
                        <div class="card-footer">
                            <a href="#" class="btn btn-primary">More Info</a>
                        </div>
                    </div>
                    <div class="card">
                        <img class="card-img-top" src="img-ph.jpg" alt="place holder">
                        <div class="card-body">Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem, quasi soluta dolorum pariatur hic porro.</div>
                        <div class="card-footer">
                            <a href="#" class="btn btn-primary">More Info</a>
                        </div>
                    </div>
                    <div class="card">
                        <img class="card-img-top" src="img-ph.jpg" alt="place holder">
                        <div class="card-body">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto magnam esse molestiae est. Nisi aliquam libero dolorem? Qui, enim nam.</div>
                        <div class="card-footer">
                            <a href="#" class="btn btn-primary">More Info</a>
                        </div>
                    </div>
                </div>                
            </div>
        </div>
    </div>

可在此处找到运行示例：

---

多年来，等高一直是许多开发商的难题。 在我看来，您可以选择两种不同的解决方案：

Javascript解决方案

你在所有的卡片上循环并保存最大的高度。在定义了最大的卡片之后，使用JS将所有卡片设置为该高度

第1栏
第2栏
超长文本！哇，看看这篇文章，它太长了，需要在多行上断开！

多年来，等高一直是许多开发人员的难题。 在我看来，您可以选择两种不同的解决方案：

Javascript解决方案

你在所有的卡片上循环并保存最大的高度。在定义了最大的卡片之后，使用JS将所有卡片设置为该高度

第1栏
第2栏
超长文本！哇，看看这篇文章，它太长了，需要在多行上断开！

不确定这两种解决方案中的任何一种是否适用于引导卡。我使用的卡片由图像、正文和页脚div组成。可变长度仅在卡体内，因此这是唯一需要增长的部分。Bootstrap有一个内置的包装器，允许卡体增长，在较短的文本后留下空白。所以基本上，卡片的页脚总是在最低点对齐。我真的很感激你的回答，也很感谢你可能是因为我不懂。我用你的代码笔告诉你它是如何工作的：太棒了。我指的是css解决方案，但你提出的这个JS解决方案正是我想要的，谢谢！再次感谢你在这方面的帮助，但我还有一个问题，那就是我，而不是你的解决方案的问题。不确定您是否熟悉slick，但目前我正努力在我的页面中从何处调用您的代码。你能告诉我正确的方向吗？我以前和斯里克一起工作过，但那是很久以前的事了。但我认为应该在初始化滑块时调用该函数。检查此url：不确定这两种解决方案中的任何一种都适用于引导卡。我使用的卡片由图像、正文和页脚div组成。可变长度仅在卡体内，因此这是唯一需要增长的部分。Bootstrap有一个内置的包装器，允许卡体增长，在较短的文本后留下空白。所以基本上，卡片的页脚总是在最低点对齐。我真的很感激你的回答，也很感谢你可能是因为我不懂。我用你的代码笔告诉你它是如何工作的：太棒了。我指的是css解决方案，但你提出的这个JS解决方案正是我想要的，谢谢！再次感谢你在这方面的帮助，但我还有一个问题，那就是我，而不是你的解决方案的问题。不确定您是否熟悉slick，但目前我正努力在我的页面中从何处调用您的代码。你能告诉我正确的方向吗？我以前和斯里克一起工作过，但那是很久以前的事了。但我认为应该在初始化滑块时调用该函数。检查此url：

.s_container{
margin: 0 auto;
padding: 0 40px 0 40px;
width: 100%;
}

.slider{
border: 2px solid red;
}

.slick-track {
display: flex !important;
}

.slick-slide{
margin: 12px;
height: auto;
border: 2px solid green;
}

.slick-frame {
visibility: hidden;
}

// Get cards
var cards = $('.card-body');
var maxHeight = 0;

// Loop all cards and check height, if bigger than max then save it
for (var i = 0; i < cards.length; i++) {
  if (maxHeight < $(cards[i]).outerHeight()) {
    maxHeight = $(cards[i]).outerHeight();
  }
}
// Set ALL card bodies to this height
for (var i = 0; i < cards.length; i++) {
  $(cards[i]).height(maxHeight);
}