如何使 Bootstrap 4 行擴展以填充剩餘高度？

Bootstrap 4 - 擴展行以填充剩餘高度

在本文中，我們將探討如何擴展行以填充剩餘高度使用Bootstrap 4 。

問題：

您可能會遇到這樣的情況：您希望拉伸一行以佔據剩餘的可用高度。儘管嘗試使用 h-100 類，螢幕底部仍出現過多空白。

解決方案：Bootstrap 4.1 flex-grow-1 類別

Bootstrap 4.1引入了flex-grow-1 類，它允許元素擴展以填充其父容器內的剩餘空間。透過利用這個類，我們可以達到我們想要的結果。

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

<br>html,body{height:100%;} <p>.bg-purple {<br>背景：rgb(48,0,50);<br>}<br>.bg-gray {<br>背景：rgb(74,74,74);<br>}<br>.bg-blue {<br>背景：rgb(50,101,196);<br>}<br>.bg-red {<br>背景：rgb(196,50,53);<br>} </p><p></p><div> <div class="row justify-content-center h-100"><p></p></div>
<br>
</div> <br>

說明：

1. Flexbox 容器： 我們加入了d-flex 和flex-column類到紅色列以啟用彈性盒功能。
2. 固定行：我們為紫色行（第 1 行）設定固定高度以防止其擴展。
3. Flex-grow：我們將 flex-grow-1 類別應用於藍色行（第 2 行），使其增長並填充剩餘高度。

透過這些調整，藍色行現在將佔據紅色列內的剩餘可用空間。此方法可確保有效利用整個頁面高度，而底部不會有任何額外的空白。

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