ブートストラップ 4 行の残りの高さをフレックスボックスで埋めるにはどうすればよいですか?-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

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

Linda Hamilton

Nov 27, 2024 pm 01:39 PM

How to Fill Remaining Height of a Bootstrap 4 Row with Flexbox?

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

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

<br>html, body {</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><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 サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。