Bootstrap 4 で残りの高さを行で埋めるにはどうすればよいですか?

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

ブートストラップ 4 で利用可能な残りの高さにまたがる行を実現するのは難しい場合がありますが、それは可能です。 flex-grow-1 クラスを使用してこれを実現する方法を見てみましょう。

現在の問題と原因

提供されたコードでは、h-100 を使用して次のことを行っています。行とネストされた列の両方の高さを設定します。ただし、この方法では、ネストされた列 (青い行) が親列内で展開されるため、画面の下部に空白が作成されます。

解決策: flex-grow-1 を使用します。

Bootstrap 4.1 では、要素に固有サイズ 0 を割り当てる flex-grow-1 クラスが導入されました。次に、残りのスペースを埋めるためにそれを拡大します。この場合、ストレッチする必要がある行にそれを適用します。

改訂されたコード

改訂されたコード スニペットは次のとおりです:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

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

説明

改訂版ではコード:

• 親列 (背景が赤) は、h-100 を使用して高さが 100% に設定されています。
• ネストされた列は、d- を使用して div でラップされます。 flex flex-column クラス。子を垂直列に配置し、利用可能な高さ内で拡張できるようにします。
• 2 行目 (青色の背景) には、flex-grow-1 クラスが適用されています。これにより、行が親列内の残りの高さを拡張して埋めるように指示されます。

その結果、青い行は赤い列内のすべての未使用スペースを占めるように拡張され、目的の効果が達成されます。残りの高さを埋めます。

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