Bootstrap 4 flexbox內容100％高度

Question

我有Bootstrap 4的一些問題。

我已經激活了flexbox，我希望列中的內容是100％的高度。

這是如下結構：

<div class="row"> 
<div class="col-md-6 col-xs-12"> 
    <div class="content"> 
    </div> 
</div> 
</div> 

這是結果： Flexbox

灰色背景如何可以是100％的高度？我嘗試了身高：100％。但容器將是頁面高度的100％，而不是列的高度。我也嘗試將親屬和孩子設置爲絕對。沒有用。 在內容上設置背景顏色。

Codeexample： http://jsfiddle.net/KjGZw/339/

Answer 1

你需要讓.col div的柔性容器與display:flex和應用flex-direction:column那些。

然後設置.content的div到flex:1

.row { 
 
    height: auto; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 
.col { 
 
    padding: 15px; 
 
    flex: 1 1 25%; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.content { 
 
    background: purple; 
 
    color: white; 
 
    padding: 15px; 
 
    flex: 1; 
 
} 
 
*, 
 
:after, 
 
:before { 
 
    box-sizing: inherit; 
 
}

<div class="row"> 
 
    <div class="col"> 
 
    <div class="content"> 
 
     Test 
 
     <br />Test 
 
     <br />Test 
 
     <br />Test 
 
     <br />Test 
 
     <br /> 
 

 
    </div> 
 
    </div> 
 
    <div class="col"> 
 
    <div class="content"> 
 
     Test 
 
    </div> 
 
    </div> 
 
    <div class="col"> 
 
    <div class="content"> 
 
     Test 
 
    </div> 
 
    </div> 
 
    <div class="col"> 
 
    <div class="content"> 
 
     Test 
 
    </div> 
 
    </div> 
 
    <div class="col"> 
 
    <div class="content"> 
 
     Test 
 
     <br>Test 
 
     <br>Test 
 
     <br>Test 
 
     <br> 
 
    </div> 
 
    </div> 
 
    <div class="col"> 
 
    <div class="content"> 
 
     Test 
 
    </div> 
 
    </div> 
 
</div>