ブートストラップの4行フィルの残りの高さを作成するには?

ブートストラップ 4: 行の残りの高さを埋める

ブートストラップ 4 では、残りの垂直スペースを完全に占有する行を作成するのが難しい場合があります。デフォルトでは、h-100 クラスを行に追加しても意図したとおりに機能しません。

解決策: Flexbox

残りの高さを埋めるために行をストレッチするには、 Bootstrap 4.1 フレックスボックス プロパティ flex-grow-1 を利用します。このクラスを使用すると、コンテナ内の残りの利用可能なスペースを埋めるために要素を拡張できます。

実装

ソリューションを実装する方法は次のとおりです:

1. コンテナの高さを追加します: コンテナ要素 (コンテナ流体) の高さを 100% に設定します。
2. フレックスボックス列内に列をネストします: 列をラップしますd-flex クラスと flex-column クラスを含む div 内で。
3. Apply 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>

結果:

青い行 (ROW 2) が表示されます。赤い列の残りの高さを埋めるように展開します。

以上がブートストラップの4行フィルの残りの高さを作成するには?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。