ブートストラップで行の高さが動作しない4

Question

こんにちは私は2行を使ってブートストラップで単純なレイアウトを作ろうとしていますが、高さ（h-50）クラスは私にとってはうまくいきません。

私はh-50が画面の上半分であり、もう一方のh-50が下半分を取ると予想していました。

実際には、行の高さが画面の半分よりも小さいコンテンツのサイズにすぎないことに気付きます。

次のように私はいくつかのコードを持っている：

<div className="Profile container-fluid"> 

<div className="row h-50"> 
<div className="col"> 
<h1>Content</h1> 
</div> 
</div> 

<div className="row h-50"> 
<div className="col-12 col-xl-3 ml-auto">Content</div> 

<div className=" col-10 col-xl-3 mx-auto mr-xl-auto ml-xl-0 text-center text-xl-left"> 
<h3>Hello!</h3> 
<p>Content</p> 
</div> 
</div> 
</div> 

ところであなたは私のプロフィールのCSSクラスを迷っている場合は、ちょうど分、高さ：100VH。したがって、高さが明確に指定されています。

Answer 1

行クラスは、その内容の高さのみをとります。高さのあるクラスを与えることはできません。ただし、行div内に別のdivを配置してそのスタイルを設定することもできます。 height150のようなクラス名を付けてcssを追加することができます。

<style> 
.height150 { 
    height: 150px; 
} 
</style> 

<div className="row h-50" style="background-color:lavender;"> 
    <div class="height150"> 
    <div className="col"> 
    <h1>Content</h1> 
    </div> 
    </div> 
</div>