如何使用 Flexbox 填充 Bootstrap 4 行的剩余高度？

如何填充 Bootstrap 4 行的剩余高度

放大一行以占用剩余屏幕空间可以使用 Bootstrap 4 来实现要实现此目的，请避免将 h-100 添加到行类中以防止出现额外的空格。相反，请使用 flex-grow-1 类，如下所示：

<br>html, body {<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">height: 100%;

登录后复制

}

.container -流体 {

height: 100%;

}

.row {

justify-content-center;
height: 100%;

}

.col-4 {

background: rgb(196, 50, 53);

}

.col-8 {

background: rgb(74, 74, 74);

}

.bg-紫色{

background: rgb(48, 0, 50);

}

.bg-blue {

background: rgb(50, 101, 196);
flex-grow: 1;

}

红栏内，使用 d-flex 和 flex-column 将另一列与垂直 Flexbox 嵌套。一行被分配固定高度（例如 150px），而另一行被分配 flex-grow-1，这确保它扩展以填充剩余空间。最后，在彩色背景上添加白色文本的 text-white 类。

以上是如何使用 Flexbox 填充 Bootstrap 4 行的剩余高度？的详细内容。更多信息请关注PHP中文网其他相关文章！