html - 在 Bootstrap 4 flexbox 中创建等高的 div

Question

我使用启用了 Bootstrap 4 的 flexbox。我无法使 row > col > div 框等高。

我试过 position: absolute 但它不是最好的。

截图如下:

<div class="row" >
<div class="col-xs-12" >
<div class="home_category" ></div> 
</div>
<div class="col-xs-12" >
<div class="home_category" ></div>
</div>
</div>

col-xs-12 的高度始终相等，但 .home_category 高度根据内容大小而变化。

我正在寻找一种解决方案，使 .home_category 的高度达到 100%。与 col-xs-12 高度相同。

现场演示 https://officestock.ca/

感谢您的反馈。

Answer 1

在检查您的代码时，这些框目前正在从内容中获取它们的高度。您会注意到一些图像标签是两行的，而另一些是三行的。这些行号的差异导致框的高度不同。

要对所有框应用完整、相等的高度，只需对您的 CSS 进行以下调整:

@media (min-width: 48em) {
.col-md-6 {
    flex: 0 0 50%;
    display: flex; /* NEW */
}