如何在引导中自动调整行高?

Question

我正在学习 Bootstrap，我正在尝试弄清楚如何在以下条件下自动调整行高：

• 容器流体中有 3 行
• row1必须调整到其内容的高度
• row3必须调整到其内容的高度，并且位于视口的底部
• row2应将其高度调整为row1和row3之间的空间，以填充容器流体

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>

JSFiddle 演示

最好的方法是什么？提前谢谢你！

Answer 1

您正在寻找弹性框实用程序类。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 中设置的固定高度已被移除，以允许页眉/页脚为其内容的高度，并允许内容行填充剩余高度。

---

相关：
引导 4：如何使行拉伸剩余高度？
引导 - 填充页眉和页脚之间的流体容器

Answer 2

我看到你使用引导程序 4。但是任何使用 bootstrap 3 或根本不使用任何 CSS 库的人，那么解决方案将是下面的代码。

.parent-row{
display: flex;
}
.children-columns{
display: flex;
}