Question

如何将height 15%分配给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>

希望这有帮助！：）

为Bootstrap行分配基于百分比的高度

2 个答案: