ブートストラップ行にパーセントベースの高さを割り当てる

Question

のheightをBootStrap行に割り当てるにはどうすればよいですか？

高さを15pxに設定すると、私にはうまくいくように見えます。そうでなければ、高さは0になります。

Answer 1

ページの高さの15％を行に割り当てることを意味する場合は、ビューポート単位を使用できます。

.my-row { 
    height: 15vh; 
} 

これは、行の高さがページの高さの15％であることを意味します。

Answer 2

あなたはパーセンテージベースの要素にheight、あなたが必見を使用する場合は、エレメントの親の1に固定高さを有しています。

固定高さの要素が直接の親である場合は、ターゲット要素にパーセンテージベースの高さが必要です。

固定高さは直接の親よりもDOMでアップ高い要素上にある場合は、ターゲット要素と、固定の間にすべての要素に対するパーセントベースの高さを指定する必要があります高さ要素。ここで

は、直接の親.containerを使用して、作業例です：

.container { 
 
    border: 1px solid black; 
 
    height: 200px; 
 
} 
 

 
.row { 
 
    background: red; 
 
    height: 20px; 
 
} 
 

 
.row:nth-of-type(2n) { 
 
    background: blue; 
 
    height: 80%; /* corresponds to 160px, because 160 is 80% of 200 */ 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="container"> 
 
    <div class="row"></div> 
 
    <div class="row"></div> 
 
    <div class="row"></div> 
 
</div>

は、この情報がお役に立てば幸い！ :)