如何讓Bootstrap 4行佔據剩餘高度？

如何在Bootstrap 4 中使行填充剩餘高度

問題

在Bootstrap 4 中，如何使行拉伸以佔據剩餘高度剩餘可用高度？將 h-100 新增至 row 類別會在螢幕底部留下一個空白。

範例程式碼

<div class="container-fluid h-100">
  <div class="row justify-content-center h-100">
    <div class="col-4 bg-red">
      <div class="h-100">
        <div class="row justify-content-center bg-purple">
          <div class="text-white">
            <div>

解

填滿中的剩餘空間紅色列和藍色行，使用 Bootstrap 4.1類flex-grow-1.

...
<div class="row justify-content-center bg-blue flex-grow-1">
  <div class="text-white">ROW 2 - grow remaining height</div>
</div>
...

修訂後的程式碼

<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>

範例

[查看現場示範](https://codeply.com/ go/Iyjsd8djnz )

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