我无法通过光滑的轮播获得具有不同长度正文内容的等高引导卡片。我在这里查看了类似的答案,但它们似乎都不适用于我的场景。
我已经设法获得了等高的幻灯片,但出于某种原因,我无法让幻灯片中的卡片达到幻灯片(父容器)的 100% 高度。我正在努力实现 Bootstrap 类“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>
CSS
.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;
}
运行的例子可以在这里找到:
最佳答案
多年来,等高一直是困扰许多开发人员的问题。 在我看来,您可以在 2 种不同的解决方案之间进行选择:
- Javascript 解决方案
您遍历所有卡片并保存最大的高度。定义最大的卡片后,使用 JS 将所有卡片设置为该高度。
https://www.bootply.com/LnwZjxWe7L
// 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);
}
- 纯 CSS 解决方案
这个解释起来有点复杂,所以这里是一个如何做的例子:
#container3 {
float:left;
width:100%;
background:green;
overflow:hidden;
position:relative;
}
#container2 {
float:left;
width:100%;
background:yellow;
position:relative;
right:30%;
}
#container1 {
float:left;
width:100%;
background:red;
position:relative;
right:40%;
}
#col1 {
float:left;
width:26%;
position:relative;
left:72%;
overflow:hidden;
}
#col2 {
float:left;
width:36%;
position:relative;
left:76%;
overflow:hidden;
}
#col3 {
float:left;
width:26%;
position:relative;
left:80%;
overflow:hidden;
}
<div id="container3"> <!-- added -->
<div id="container2"> <!-- added -->
<div id="container1">
<div id="col1">Column 1</div>
<div id="col2">Column 2</div>
<div id="col3">Super long text! Wow looks at this text, it is so long it needs to break on multiple lines!</div>
</div>
</div> <!-- added -->
</div> <!-- added -->
我从这里得到了这个解决方案: https://matthewjamestaylor.com/equal-height-columns
关于css - Slick Carousel 中的等高引导卡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54653060/