在 Bootstrap 4 flexbox 中创建等高 div答案

【问题标题】：Creating equal height divs in Bootstrap 4 flexbox在 Bootstrap 4 flexbox 中创建等高 div
【发布时间】：2016-01-09 06:23:48
【问题描述】：

我使用启用了 Bootstrap 4 的 flexbox。我不能让 row > col > div box 等高。

我试过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/现场演示

感谢您的反馈。

【问题讨论】：

标签： html twitter-bootstrap css flexbox

【解决方案1】：

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

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

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

【讨论】：