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

Bootstrap 3 全高两列布局

问题：

创建一个两列-Bootstrap 3 中的全高列布局提出了一个挑战，因为缺乏对此特定布局的原生支持。

解决方案：

虽然仅 Bootstrap 3 类无法实现此目的，但我们可以利用 CSS 来实现自定义全高列使用 CSS 的解决方案

HTML:

<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 表来实现全高效果。 .container 元素设置为显示：table，.row 元素设置为显示：table-row。列元素（.col-md-3 和 .col-md-9）设置为 display: table-cell 和 float: none，这会删除默认的浮动行为。

响应式调整

为了确保响应行为，您可以修改特定断点的 CSS。例如，您可以使用媒体查询仅应用中等屏幕宽度及以上的表格显示属性。

自定义类：

避免修改本机 Bootstrap 列类，我们在标记中使用自定义类（非浮动），并且仅将 CSS 表格样式应用于该类

注意事项：

• 1:3 的比例是硬编码在 CSS 中的。对于其他比例，您需要调整填充。
• 对于所有屏幕尺寸上的全高列，请从标记中删除 Bootstrap 列类。

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