html - Bootstrap 3 两列全高

Question

我正在尝试使用 Twitter Bootstrap 3 制作两列 全高 布局。Twitter Bootstrap 3 似乎不支持全高布局。我想做什么:

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

如果内容增长，nav 也应该增长。

• 每个父级的高度 100% 不起作用，因为存在内容为一行的情况。
• position: absolute 好像是错误的方式。
• 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)，因为它们更改了 their grid system到 flex 盒。 (继续阅读 Bootstrap 3)

---

原生 Bootstrap 3.0 类不支持您描述的布局，但是，我们可以集成一些使用 css tables 的自定义 CSS实现这一目标。

Bootply demo / 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 属性)和 ratio 1:3(导航:内容) 中等屏幕宽度及以上 - (由于 Bootstrap 的默认类:col-md-3 和 col-md-9)

注意:

1) 为了不弄乱 bootstrap 的原生列类，我们在标记中添加另一个类，如 no-float 并且只设置 display:table-此类上的 cell 和 float:none(与列类本身相对)。

2) 如果我们只想将 css-table 代码用于特定断点(比如中等屏幕宽度及以上)，但对于移动屏幕，我们希望默认返回到通常的 Bootstrap 行为比我们可以将自定义 CSS 包装在媒体查询中，例如:

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

Codepen demo

现在，对于较小的屏幕，这些列的行为类似于默认的 Bootstrap 列(每个都获得全宽)。

3) 如果所有屏幕宽度都需要 1:3 比例 - 那么从标记中删除 Bootstrap 的 col-md-* 类可能会更好，因为这不是它们的本意使用。

Codepen demo