twitter-bootstrap 如何使行拉伸剩余高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42194886/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make the row stretch remaining height
提问by Reddy
I'm trying to make the container-fluidand 2nd rowto stretch to the remaining height but I couldn't find a way to do it.
我试图让container-fluid和 2ndrow伸展到剩余的高度，但我找不到办法做到这一点。
I have tried setting the align-items/align-selfto stretchbut didn't work either.
我试过设置为align-items/align-self，stretch但也没有奏效。
Below is my code structure:
下面是我的代码结构：
<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>
I'm using Bootstrap 4 A6. Could someone suggest me how to make the container and the row to stretch the remaining height?
我正在使用Bootstrap 4 A6。有人可以建议我如何制作容器和行以拉伸剩余高度吗？
回答by Zim
Bootstrap 4.1.0 has a utility class for flex-growwhich it what you need for the row to fill the remaining height. You can add a custom "fill" class for this. You also have to make sure the container is full height.
Bootstrap 4.1.0 有一个实用程序类flex-grow，它是您填充剩余高度所需的行。您可以为此添加自定义“填充”类。您还必须确保容器是全高的。
The class name in Bootstrap 4.1 is flex-grow-1
Bootstrap 4.1 中的类名是 flex-grow-1
<style>
html,body{
height:100%;
}
.flex-fill {
flex:1;
}
</style>
<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-light flex-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>
https://www.codeply.com/p/gfitG8PkNE
https://www.codeply.com/p/gfitG8PkNE
Related: Bootstrap 4 make nested row fill parent that has been made to fill viewport height using flex-grow
