Bootstrap 如何使行拉伸剩余高度

rjee0c15 于 2023-05-27 发布在 Bootstrap

关注(0)|答案(1)|浏览(229)

我试图使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>

我用的是Bootstrap 4 A6。有人能建议我如何使容器和行伸展剩余的高度吗？

twitter-bootstrap

来源：https://stackoverflow.com/questions/42194886/how-to-make-the-row-stretch-remaining-height

1条答案

按热度按时间

kiayqfof1#

Bootstrap 4.1.0有一个flex-grow的实用程序类，它是你需要的行来填充剩余的高度。您可以为此添加一个自定义的“填充”类。你还必须确保容器是全高的。
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://codeply.com/p/gfitG8PkNE
相关：Bootstrap 4使嵌套行填充父级已使用flex-grow填充视口高度

赞(0）回复(0）举报 2023-05-27

我来回答

Bootstrap 如何使行拉伸剩余高度

1条答案

相关问题

热门标签

最新问答