css - 使用 div 行 80% 和 20% Bootstrap 整页

Question

如何使用 bootstrap 实现包含 div 行 80% 和 20% 的整个页面。

----------
|        |
|        |
|        |
|        |
----------
|        |
----------

是的，我可以用表格来实现，但我想知道它是否可以用 div 行类来实现

Answer 1

您可以使用现代浏览器的“vh”度量来设置 block 大小(占视口(viewport)高度的百分比)，然后使用 Bootstraps - container-fluid 获得 100% 宽的容器来包裹两个 80/20 div。

<div class="container-fluid">
  <div class="eighty">
    80%
  </div>
  <div class="twenty">
    20%
  </div>
</div>

并设置它们的样式:

.eighty {
    height: 80vh;
    border: 1px solid red;
    display: block;
}

.twenty {
    height: 20vh;
    border: 1px solid blue;
    display: block;
}

这是一个plnkr:https://plnkr.co/edit/VASmt6damfbQCk2zcAg0?p=preview