为引导行分配基于百分比的高度

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>

希望这有助于！ :)