如何在 Bootstrap 3 中创建全高两列布局？

在 Bootstrap 3 中实现全高两列布局

Bootstrap 3 缺乏对全高列布局的原生支持。但是，通过使用自定义 CSS 并利用 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;
}

说明

此代码实现了中等屏幕宽度及以上的全高列和 1:3 比例（导航：内容） 。使用自定义 CSS 类（非浮动）来防止列浮动并确保它们显示为表格单元格。

注意事项

• Bootstrap 的本机列类（col-md-3、col-md-9）用于响应能力。
• 对于较小的屏幕（中下），列恢复为默认引导行为（每列占据 100% 宽度）。
• 如果所有屏幕宽度都需要 1:3 比例，则可以从标记中删除 bootstrap 的列类.

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