Question

如何使用自动引导来实现div行80％和20％的整页。

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

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

Answer 1

您可以使用现代浏览器的'vh'度量来设置以视口高度％为单位的块大小，然后使用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

Answer 2

使用这样的基本引导布局，

<div class="content">
  <div class="row eighty">
    <div class="col-xs-6">
      First column
    </div>
    <div class="col-xs-6">
      Second column
    </div>
  </div>
  <div class="row twenty">
    <div class="col-xs-6">
      First column
    </div>
    <div class="col-xs-6">
      Second column
    </div>
  </div>

您可以将行高扩展到窗口高度的百分比。

html {
  height:100%;
}

body {
  height:100%;
  margin:0;
}

.content {
  height:100%;
}

.eighty {
  height:80%;
}

.twenty {
  height:20%;
}

注意html，body和.content元素是如何设置为窗口高度的100％。

div行80％和20％的bootstrap整页

2 个答案: