Twitter Bootstrap 是否可用于创建具有固定宽度侧边栏和流动宽度主要内容区域的两列布局？

使用 Twitter Bootstrap 创建 2 列（固定 - 流动）布局

在本文中，我们将深入研究是否可行使用 Twitter Bootstrap 实现具有固定宽度侧边栏和流动宽度主要内容区域的两列布局。我们将提供全面的解释和解决方案来指导您的开发。

Twitter Bootstrap 有可能吗？

Twitter Bootstrap 最初通过“.container-fluid”类。不过，随着2.0版本的发布，这个功能被删除了。因此，仅使用标准 Bootstrap 类不可能实现固定流体布局。

解决方案

1.固定流体布局

我们可以使用修改后的 HTML 和 CSS 的组合来实现固定流体布局：

HTML：

<div>

CSS：

.fixed {
    width: 150px;
    float: left;
}

.fixed + div {
     margin-left: 150px;
     overflow: hidden;
}

html, body {
    height: 100%;
}

.fill { 
    min-height: 100%;
    position: relative;
}

.filler::after{
    background-color:inherit;
    bottom: 0;
    content: "";
    height: auto;
    min-height: 100%;
    left: 0;
    margin:inherit;
    right: 0;
    position: absolute;
    top: 0;
    width: inherit;
    z-index: -1;  
}

2.相等的列高（可选）

要实现侧边栏和内容区域的相等高度：

HTML：

<div>

注释：

• 要使侧边栏成为填充元素，请在 CSS 中将“right: 0”更改为“left: 0”。

以上是Twitter Bootstrap 是否可用于创建具有固定宽度侧边栏和流动宽度主要内容区域的两列布局？的详细内容。更多信息请关注PHP中文网其他相关文章！