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

Bootstrap 3 两列全高：综合指南

简介
在 Bootstrap 3 中实现全高列布局可以是这是一个挑战，因为本机类不支持此功能。本文探讨了一种利用自定义 CSS 创建比例为 1:3 的全高列的解决方案，满足两列都延伸视口整个高度的布局需求。

HTML 标记
此布局的 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 样式
为了实现全高列，我们结合了使用 display: table; 的自定义 CSS；属性来创建 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 样式定义以下内容：

• html、body、.container 设置为 height: 100%；确保内容填满整个视口。
• .container 配置为 display: table;创建 CSS 表格。
• .row 将 display 属性设置为 table-row 以在 css 表格中创建行。
• .row .no-float 将 display: table-cell 设置为使列的行为类似于行中的表格单元格。
• 浮动：没有覆盖 Bootstrap 的默认浮动行为

自定义

• 编辑 .container 上的 margin-top 值以调整标题的上边距。
• 修改.container 上的填充值用于设置容器的左/右间距列。
• 从列中删除 col-md-* 类，以在所有屏幕宽度上创建固定的 1:3 比例。

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