如何在Bootstrap 3中实现全高两栏布局？

Bootstrap 3 两列全高优化

在 Bootstrap 3 中，创建具有两列的全高布局可能具有挑战性。本机类不支持开箱即用。但是，我们可以使用自定义 CSS 来实现它。

标记：

<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;
    box-sizing: border-box;
}

.row {
    height: 100%;
    display: table-row;
}

.row .no-float {
  display: table-cell;
  float: none;
}

此 CSS 利用 CSS 表来创建全高列。 “.no-float”类可防止由于 Bootstrap 基于浮动的布局而导致列折叠。

其他注意事项：

• 保持 1:3中等屏幕宽度及以上的比例，使用“.col-md-3”和“.col-md-9”
• 如果所有屏幕宽度都需要此比例，请考虑删除 Bootstrap 列类以避免不当使用。
• 较小的屏幕默认为常规 Bootstrap 列行为，每列都采用完整的宽度。

以上是如何在Bootstrap 3中实现全高两栏布局？的详细内容。更多信息请关注PHP中文网其他相关文章！