如何使用 Flexbox 填入 Bootstrap 4 行的剩餘高度？

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

放大一行以佔用剩餘螢幕空間可以使用Bootstrap 4 來實現要實現此目的，請避免將h-100 新增至行類別以防止額外的空格。相反，請使用flex-grow-1 類，如下所示：

<br>html, body {<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;

}
}

pre>

紅色欄內，使用d-flex 和flex-column將另一列與垂直 Flexbox 嵌套。一行被分配固定高度（例如 150px），而另一行被分配 flex-grow-1，這確保它擴展以填充剩餘空間。最後，在彩色背景上新增白色文字的 text-white 類別。

以上是如何使用 Flexbox 填入 Bootstrap 4 行的剩餘高度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！