Twitter bootstrap 3两列全高

Question

我正在尝试使用twitter bootstrap 3 进行两列 全高 布局。似乎 twitter bootstrap 3
不支持全高布局。我想做的事：

  +-------------------------------------------------+
  |                     Header                      |
  +------------+------------------------------------+
  |            |                                    |
  |            |                                    |
  |Navigation  |         Content                    |
  |            |                                    |
  |            |                                    |
  |            |                                    |
  |            |                                    |
  |            |                                    |
  |            |                                    |
  +------------+------------------------------------+

如果内容增加，则导航也应增加。

• 每个父母的身高100％无效，因为在某些情况下内容为一行。
• 绝对位置似乎是错误的方法
• display: table而display:table-cell解决这个问题，但它是胜之不武

的HTML：

    <div class="container">
      <div class="row">
        <div class="col-md-3"></div>
        <div class="col-md-9"></div>
      </div>
    </div>

有没有办法使它与默认的 twitter bootstrap 3 类一起使用？

Answer 1

编辑： 在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演示