在Bootstrap 4 flexbox中创建相等的高度div

Question

我使用Bootstrap 4 flexbox。我不能做行＆gt; col＆gt; 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/

的现场演示

感谢您的反馈意见。

Answer 1

在审核您的代码时，这些框目前正在从内容中获得高度。您会注意到某些图像标签是双线的，而其他图像标签是三线的。这些行号的差异导致盒子的高度不同。

要对所有框应用完全相同的高度，只需对CSS进行此调整：

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