Question

我正在尝试使用新的Bootstrap 4.0建立网站，并尝试使用新的卡片功能我试图得到的是您在图A中看到的内容

在第2列减少

.card-columns {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    column-gap: 0;
}

并将所有内容放入卡片栏div中，

<div class="card-columns">
 <div class="card">card1</div>
 <div class="card">card2</div>
 <div class="card">card3</div>
 <div class="card">card4</div>
</div>
<div class="col-lg-12">landscapeImage</div>

我在B中获得结果，最短的列和风景图像之间有一个空白，

我想强制2列的高度相同。

我当时正在考虑将所有内容都放在最短列的高度的大div中，并使最高列溢出，但是我做不到...

我该怎么办？可以用干净的方式做到吗？

提前感谢您的帮助！

Answer 1

<div class="card h-100 card-body">

这是一个示例bootstrap-4-equal-height-cards

Bootstrap 4个相同高度的卡柱

1 个答案: