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

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

Bootply演示 /Codepen

标记：

<header>Header</header>
<div class="container">
    <div class="row">
        <div class="col-md-3 no-float">Navigation</div>
        <div class="col-md-9 no-float">Content</div>
    </div>
</div>

（相关）CSS

html,body,.container {
    height:100%;
}
.container {
    display:table;
    width: 100%;
    margin-top: -50px;
    padding: 50px 0 0 0; /*set left/right padding according to needs*/
    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演示