如何使用Twitter Bootstrap构建2列（固定-流体）布局？

如何使用Twitter Bootstrap构建2列（固定-流体）布局？

-另一个更新-

自从Twitter Bootstrap版本2.0（看到

.container-fluid

该类已删除）以来，不可能仅使用bootstrap类来实现两列固定流体布局-
但是我更新了我的答案以包括一些可以进行的小的CSS更改在您自己的CSS代码中，这将使其成为可能

可以使用下面的CSS以及从Twitter Bootstrap
Scaffolding：layouts文档页面获取的经过 稍微 修改的HTML代码来实现固定流体结构：

HTML

<div >    <div >        <div >  <!-- we want this div to be fixed width --> ...        </div>        <div >  <!-- we have removed spanX class --> ...        </div>    </div></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.0的编辑使其成为一种流体解决方案-因为它解释了使边栏和内容具有相同高度的背后的概念
（如注释中所指出，这是问者问题的重要部分）

---

重要

下面的答案是流体

更新 正如@JasonCapriotti在评论中指出的那样，此问题的原始答案（为v1.0创建）在Bootstrap 2.0中不起作用。因此，我更新了答案以支持Bootstrap 2.0

为确保主要内容至少填充屏幕高度的100％，我们需要将

html

和的高度设置

body

为100％，并创建一个新的css类

.fill

，其最小高度为100％：

html, body {    height: 100%;}.fill {     min-height: 100%;}

然后，我们可以将

.fill

类添加到需要占用屏幕高度100％的任何元素中。在这种情况下，我们将其添加到第一个div中：

<div >    ...</div>

确保补充工具栏和内容列具有相同的高度是非常困难且不必要的。取而代之的是，我们可以使用

::after

伪选择器添加一个

filler

元素，该元素会给人以错觉，即两列的高度相同：

.filler::after {    background-color: inherit;    bottom: 0;    content: "";    right: 0;    position: absolute;    top: 0;    width: inherit;    z-index: -1;  }

为了确保

.filler

元素相对于

.fill

元素定位，我们需要添加

position: relative

到

.fill

：

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

最后将

.filler

样式添加到HTML：

HTML

<div >    <div >        <div > ...        </div>        <div > ...        </div>    </div></div>

笔记

• 如果需要页面左侧的元素作为填充符，则需要更改

  right: 0

  为

  left: 0

  。