Twitter bootstrap 3两列全高

编辑： 在Bootstrap 4中，本机类_可以_生成全高列（DEMO），因为它们将其网格系统更改为flexbox。（请继续阅读Bootstrap3）

本机的Bootstrap3.0类不支持您描述的布局，但是，我们可以集成一些使用CSS表的自定义CSS 来实现此目的。

Bootply演示 /Codepen

标记：

<header>Header</header><div >    <div >        <div >Navigation</div>        <div >Content</div>    </div></div>

（相关）CSS

html,body,.container {    height:100%;}.container {    display:table;    width: 100%;    margin-top: -50px;    padding: 50px 0 0 0;     box-sizing: border-box;}.row {    height: 100%;    display: table-row;}.row .no-float {  display: table-cell;  float: none;}

上面的代码将实现 全高列* （由于我们添加了自定义的css-table属性），并且对于 中等屏幕宽度 及以上的 屏幕 ，
比例为1：3 （Navigation：Content）-（由于bootstrap的默认类是col-md -3和col-md-9）
*

注意：

1） 为了不起来引导的原生柱类，我们添加另一个类像混乱

no-float

display:table-cell

float:none

2） 如果我们只想将css-
table代码用于特定的断点（例如中等屏幕宽度及以上），但是对于移动屏幕，我们希望默认返回到通常的引导行为，而不是将自定义CSS封装在媒体查询说：

@media (min-width: 992px) {  .row .no-float {      display: table-cell;      float: none;  }}

Codepen演示

现在，对于较小的屏幕，这些列的行为将类似于默认的引导程序列（每个引导列都变为全宽）。

3） 如果所有屏幕宽度都必须使用1：3的比例-那么从标记中删除bootstrap的col-md- *类可能更好，因为这不是要使用的方式。

Codepen演示