ブートストラップ 4 行を拡張して残りの高さを埋めるにはどうすればよいですか?

ブートストラップ 4 - 行を拡張して残りの高さを埋める

この記事では、行を拡張して残りの高さを埋める方法について説明します。 Bootstrap 4 の使用。

問題:

利用可能な高さの残りを占めるために行を拡張したい状況が発生する可能性があります。 h-100 クラスを使用しようとしても、画面の下部に過剰な空白が表示されます。

解決策: Bootstrap 4.1 flex-grow-1 Class

Bootstrap 4.1 flex-grow-1 クラスを導入すると、要素を展開して親コンテナ内の残りのスペースを埋めることができます。このクラスを利用することで、望ましい結果を達成できます。

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

<br>html,body{height:100%;}</p> <p>.bg-purple {<br> 背景: rgb(48,0,50);<br>}<br>.bg-gray {<br> 背景: rgb(74,74,74);<br>}<br>.bg-blue {<br> 背景: rgb(50,101,196);<br>}<br>.bg-red {<br> 背景: rgb(196,50,53);<br>} </p>
<p><div> <div class="row justify-content-center h-100"></p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><div>

ログイン後にコピー