ブートストラップ 4 行の残りの高さをフレックスボックスで埋めるにはどうすればよいですか?

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

行を拡大して残りの画面スペースを占めるには、ブートストラップ 4 を使用します。これを実現するには、余分な空白を防ぐために行クラスに h-100 を追加しないようにします。代わりに、以下に示すように、flex-grow-1 クラスを利用します:

<br>html, body {<pre class="brush:php;toolbar:false">height: 100%;

}

.container -流体{

height: 100%;

}

.row {

justify-content-center;
height: 100%;

}

.col-4 {

background: rgb(196, 50, 53);

}

.col-8 {

background: rgb(74, 74, 74);

}

.bg-purple {

background: rgb(48, 0, 50);

}

.bg-blue {

background: rgb(50, 101, 196);
flex-grow: 1;

}

赤い列内で、d-flex と flex-column を使用して垂直フレックスボックスで別の列をネストします。 1 つの行には固定の高さ (例: 150px) が割り当てられ、もう 1 つの行には flex-grow-1 が割り当てられ、残りのスペースを埋めるように拡張されます。最後に、カラフルな背景に白いテキストを表示する text-white クラスを組み込みます。

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