爲引導行分配基於百分比的高度

Question

如何將15%的height分配給BootStrap行？

如果我指定15px的高度，它似乎只適用於我，否則我最終的高度爲0。

Answer 1

如果您指的是要分配給該行的頁面高度的15％，則可以使用視口單位。

.my-row { 
    height: 15vh; 
} 

這意味着您的行高度是頁高的15％。

Answer 2

如果您使用的元素height基於百分比的，你必須有對元素的父母之一固定高度。

如果具有固定高度的元素是直接父元素，則只需要目標元素上基於百分比的高度。

如果固定高度是最高的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>

希望這有助於！ :)