如何使行拉伸剩余高度 [英] How to make the row stretch remaining height
问题描述
我正在尝试将container-fluid
和第二个row
拉伸到剩余的高度,但是我找不到办法.
I'm trying to make the container-fluid
and 2nd row
to stretch to the remaining height but I couldn't find a way to do it.
我尝试将align-items/align-self
设置为stretch
,但是也没有用.
I have tried setting the align-items/align-self
to stretch
but didn't work either.
下面是我的代码结构:
<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 .有人可以建议我如何制作容器和行以拉伸剩余的高度吗?
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.1.0为flex-grow
提供了一个实用程序类,您需要它为行填充剩余的高度.您可以为此添加一个自定义的填充"类.您还必须确保容器已满.
Bootstrap 4.1.0 has a utility class for flex-grow
which 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中的类名称为flex-grow-1
The class name in Bootstrap 4.1 is 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
相关: 查看全文