如何讓Bootstrap 4行填滿剩餘高度？-css教學-PHP中文網

如何讓Bootstrap 4行填滿剩餘高度？

Linda Hamilton

發布： 2024-11-16 08:00:03

原創

612 人瀏覽過

How to Make a Bootstrap 4 Row Fill Remaining Height?

Bootstrap 4：填充行中的剩餘高度

在Bootstrap 4 中，創建完全佔據剩餘垂直空間的行可能具有挑戰性。預設情況下，將 h-100 類別新增至行中將無法如預期運作。

解決方案：Flexbox

要使行拉伸以填充剩餘高度，利用 Bootstrap 4.1 flexbox 屬性 flex-grow-1。該類別允許元素增長以填充其容器中的剩餘可用空間。

實作

以下是如何實現此解決方案：

加入容器高度：將容器元素（ container-fluid）的高度設定為100%。
在 Flexbox 欄位中嵌套列： 使用 d-flex 和 Flex-column 類別將欄位包裹在 div 中。
應用 Flex -grow-1: 將 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中文網其他相關文章！