引导4：如何使行伸展剩余高度？

Question

我想让container-fluid和第二个row伸展到剩余的高度，但我找不到办法做到这一点。

我已经尝试将align-items/align-self设置为stretch，但也没有工作。

下面是我的代码结构：

<div class="container-fluid"> <!-- I want this container to stretch to the height of the parent --> 
    <div class="row"> 
     <div class="col"> 
      <h5>Header</h5> 
     </div> 
    </div> 
    <div class="row"> <!-- I want this row height to filled the remaining height --> 
     <widgets [widgets]="widgets" class="hing"></widgets> 
     <div class="col portlet-container portlet-dropzone"> <!-- if row is not the right to stretch the remaining height, this column also fine --> 
      <template row-host></template> 
     </div> 
    </div> 
</div> 

我使用引导4 A6。有人可以建议我如何使容器和排来拉伸剩余的高度吗？

Answer 1

引导程序4尚未提供flex-grow的实用程序类，它是您需要用于填充剩余高度的行。你可以为此添加一个自定义的“填充”类。您还必须确保容器是全高。

html,body{ 
    height:100%; 
} 

.fill { 
    flex:1; 
} 

<div class="container-fluid d-flex h-100 flex-column"> 
    <!-- I want this container to stretch to the height of the parent --> 
    <div class="row"> 
     <div class="col"> 
      <h5>Header</h5> 
     </div> 
    </div> 
    <div class="row bg-faded fill d-flex justify-content-start"> 
     <!-- I want this row height to filled the remaining height --> 
     <div class="col portlet-container portlet-dropzone"> 
      <!-- if row is not the right to stretch the remaining height, this column also fine --> 
      Content 
     </div> 
    </div> 
</div> 

http://www.codeply.com/go/sjWKFoVusD

---

注：的flex-fill实用类将包括在未来引导4版本： https://github.com/twbs/bootstrap/commit/2137d61eacbd962ea41e16a492da8b1d1597d3d9