如何在 Bootstrap 4 中用一行填滿剩餘高度？

Bootstrap 4：用一行填滿剩餘高度

在Bootstrap 4 中實現跨越剩餘可用高度的行可能具有挑戰性，但是這行是可能的。讓我們探索如何使用 flex-grow-1 類別來完成此任務。

當前問題和原因

在您提供的程式碼中，您使用 h-100 來設定行和巢狀列的高度。但是，這種方法會在螢幕底部建立空白區域，因為巢狀列（帶有藍色行）在父列內擴展。

解決方案：利用flex-grow-1

Bootstrap 4.1 引入了flex-grow-1 類，該類為元素分配內部大小0，然後將其增長以填充任何元素剩餘空間。在這種情況下，我們會將其應用到需要拉伸的行。

修訂後的程式碼

這是修訂後的程式碼片段：

說明

修改中代碼：

• 父列（紅色背景）的高度使用 h-100 設定為 100%。
• 嵌套列以 d- 包裹在 div 中flex flex-column 類，它將其子項排列成垂直列，並允許它們在可用高度內增長。
• 第二行（藍色背景）現在應用了 flex-grow-1 類別。這指示該行擴展並填充其父列內的任何剩餘高度。

因此，藍色行現在擴展以佔據紅色列內所有未使用的空間，從而達到所需的效果填充剩餘高度。

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