我正在学习Bootstrap,并且试图弄清楚在这种情况下如何自动调整行高:
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>
这样做的最佳方法是什么?预先谢谢你!
答案 0 :(得分:1)
您正在寻找flexbox实用程序类。 d-flex
用于display:flex
,flex-grow-1
将使第二个子div填充剩余的高度。要使用垂直布局,请使用flex-column
。
<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中设置的固定高度已被删除,以使页眉/页脚可以作为其内容的高度,而内容行则可以填充其余高度。
相关:
Bootstrap 4: How to make the row stretch remaining height?
Bootstrap - Fill fluid container between header and footer
答案 1 :(得分:0)
我看到您使用引导程序4,但是任何使用引导程序3或根本不使用引导程序3的人都使用任何CSS库,那么解决方案将是下面的代码。
.parent-row{
display: flex;
}
.children-columns{
display: flex;
}