如何使用自定义 CSS 在 Bootstrap 3 中创建全高列？

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

简介：

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

自定义 CSS 方法：

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

标记：

<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; 
}
.row {
    height: 100%;
    display: table-row;
}
.row .no-float {
    display: table-cell;
    float: none;
}

优点和注意事项：

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

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