Bootstrap 4:填充行中的剩余高度
在 Bootstrap 4 中,创建完全占据剩余垂直空间的行可能具有挑战性。默认情况下,将 h-100 类添加到行中将无法按预期工作。
解决方案:Flexbox
要使行拉伸以填充剩余高度,利用 Bootstrap 4.1 flexbox 属性 flex-grow-1。该类允许元素增长以填充其容器中的剩余可用空间。
实现
以下是如何实现该解决方案:
示例代码
<div class="container-fluid h-100"> <div class="row justify-content-center h-100"> <div class="col-4 bg-red"> <div class="h-100 d-flex flex-column"> <div class="row justify-content-center bg-purple"> <div class="text-white"> <div>
结果:
蓝色行(第 2 行)将现在展开以填充红柱的剩余高度。
以上是如何让Bootstrap 4行填充剩余高度?的详细内容。更多信息请关注PHP中文网其他相关文章!