如何在Bootstrap中自动调整行高? [英] How to automatically adjust row height in Bootstrap?
问题描述
我正在学习Bootstrap,并且试图弄清楚在这种情况下如何自动调整行高:
I'm learning Bootstrap and I'm trying to figure out how to automatically adjust a rows height given this conditions:
- 容器流体 中有3行
- 第1行必须调整为其内容的高度
- 第3行必须调整为其内容的高度,并位于视口的底部
- 第2行应将其高度调整为第1行和第3行之间的空间,以填充容器流体
- There are 3 rows within a container-fluid
- row1 must adjust to the height of its content
- row3 must adjust to the height of its content and be at the bottom of the viewport
- row2 should adjust its height to the space between row1 and row3 to fill the container-fluid
html, body, .container-fluid {
height: 100%;
background: lightyellow;
}
.col {
border: solid 1px #6c757d;
}
.content-1 {
height: 50px;
background-color: lightcoral;
}
.content-2 {
height: 200px;
background-color: lightgreen;
}
.content-3 {
height: 25px;
background-color: lightblue;
}
<div class="container-fluid">
<div class="row">
<div class="col">
<div class="content-1">
ROW 1 -> Height of its content
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="content-2">
ROW 2 -> Height between row1 and row3 automatically adjusted
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="content-3">
ROW 3 -> Height of its content
</div>
</div>
</div>
</div>
这样做的最佳方法是什么?预先谢谢你!
What would be the best approach to do so?. Thank you in advance!
推荐答案
您正在寻找flexbox实用程序类. d-flex
用于display:flex
,flex-grow-1
将使第二个子div填充剩余的高度.要使用垂直布局,请使用flex-column
.
You're looking for the flexbox utility classes. d-flex
is for display:flex
, and flex-grow-1
will make the 2nd child div fill the remaining height. Use flex-column
as you want a vertical layout.
<div class="container-fluid d-flex flex-column">
<div class="row">
<div class="col">
<div class="content-1">
ROW 1 -> Height of its content
</div>
</div>
</div>
<div class="row flex-fill">
<div class="col d-flex flex-column">
<div class="content-2 h-100">
ROW 2 -> Height between row1 and row3 automatically adjusted
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="content-3">
ROW 3 -> Height of its content
</div>
</div>
</div>
</div>
https://www.codeply.com/go/IIVJqGJ2qG
注意:自定义CSS中设置的固定高度已被删除,以使页眉/页脚可以作为其内容的高度,而内容行则可以填充剩余的高度.
Note: The fixed heights set in the custom CSS have been removed to allow the header/footer to be the height of their content, and the content row to fill the remaining height.
相关:
Bootstrap 4:如何使行拉伸剩余高度?
引导程序-在页眉和页脚之间填充流体容器
Related:
Bootstrap 4: How to make the row stretch remaining height?
Bootstrap - Fill fluid container between header and footer
这篇关于如何在Bootstrap中自动调整行高?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!