Bootstrap 3 全高列：自定义 CSS 解决方案

简介：

创建Twitter Bootstrap 3 的全高布局可能具有挑战性。虽然Bootstrap的原生类不支持此功能，但可以使用自定义CSS来实现此效果。

自定义CSS方法：

1. 设置100% 高度：
   将 body、container 和 row 元素的高度设置为 100%，以确保它们跨越整个高度viewport.
2. 显示为表格：
   使用 display: table 将容器元素转换为表格。这允许容器的内容以表格结构排列。
3. 浮动单元格：
   向导航列添加自定义类，例如 no-float。将此类设置为具有 display: table-cell 和 float: none。这将防止导航列浮动并允许其与内容列垂直对齐。

标记：

Header

    

        
Navigation
        
Content
    

CSS:

html, body, .container {
    height: 100%;
}
.container {
    display: table;
    width: 100%;
    margin-top: -50px;
    padding: 50px 0 0 0; 
}
.row {
    height: 100%;
    display: table-row;
}
.row .no-float {
    display: table-cell;
    float: none;
}

优点和注意事项：

• 此自定义 CSS 解决方案提供与 Bootstrap 3 兼容的全高布局。
• 导航与内容的 1:3 比例可以通过修改 CSS 中的列宽来调整。
• 但是，重要的是使用自定义类（例如 no-float）而不是修改 Bootstrap 的本机列类以避免冲突。