我正在学习 Bootstrap,我正在尝试找出如何在给定以下条件的情况下自动调整行高:
- 一个内有 3 行容器流体
-
row1必须调整其内容的高度
-
row3必须调整到其内容的高度并位于视口的底部
-
row2应调整其高度以适应之间的空间row1 and 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 演示 http://jsfiddle.net/aq9Laaew/236844/
这样做的最佳方法是什么?先感谢您!
您正在寻找 Flexbox 实用程序类。d-flex
is for display:flex
, and 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 https://www.codeply.com/go/IIVJqGJ2qG
注意:自定义 CSS 中设置的固定高度已被删除,以允许页眉/页脚为其内容的高度,并让内容行填充剩余高度。
有关的:
Bootstrap 4:如何使行拉伸剩余高度? https://stackoverflow.com/questions/42194886/bootstrap-4-how-to-make-the-row-stretch-remaining-height
Bootstrap - 在页眉和页脚之间填充流体容器 https://stackoverflow.com/questions/15641142/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)