ブートストラップ 4 列が残りの高さを占めるようにするにはどうすればよいですか?

Bootstrap 4 で行を埋める残りの高さを作成する方法

質問

Bootstrap 4 で、行を拡張して領域を占めるようにするにはどうすればよいですか?残りの利用可能な高さは?行クラスに h-100 を追加すると、画面の下部に空白が残ります。

サンプル コード

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

以上がブートストラップ 4 列が残りの高さを占めるようにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。