在Bootstrap 4 flexbox中創建等高div

Question

我使用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高度變化的基礎上的內容的大小。

我正在尋找一個解決方案，以100％的高度爲.home_category。與col-xs-12相同的高度。

在https://officestock.ca/

現場演示非常感謝您的反饋。

Answer 1

在審閱您的代碼時，這些框當前正在從內容中獲取高度。你會注意到一些圖像標籤是雙行的，而其他的則是三行。這些行號的差異會導致盒子的高度不同。

申請全面，平等的高度，所有箱子只是讓這一調整你的CSS：

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