如何使用Twitter Bootstrap构build2列（固定stream体）布局？
是否有可能创build一个2列布局（固定stream体）布局（ http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-21-fixed-fluid/ ）与Twitter的Bootstrap（http ：//twitter.github.com/bootstrap/）？
你有什么解决办法？
– 另一个更新 –
由于Twitter Bootstrap版本2.0 – 看到.container-fluid类的删除 – 它不可能实现只使用引导类的两列固定stream体布局 – 但是我已经更新了我的答案，包括一些小的CSS更改这可以在你自己的CSS代码中做出，这将使这成为可能
可以使用下面find的CSS实现一个固定的stream体结构，并稍微修改从Twitter Bootstrap 脚手架取得的HTML代码：布局文档页面：
HTML
<div class="container-fluid fill"> <div class="row-fluid"> <div class="fixed"> <!-- we want this div to be fixed width --> ... </div> <div class="hero-unit filler"> <!-- we have removed spanX class --> ... </div> </div> </div>
CSS
/* CSS for fixed-fluid layout */ .fixed { width: 150px; /* the fixed width required */ float: left; } .fixed + div { margin-left: 150px; /* must match the fixed width in the .fixed class */ overflow: hidden; } /* CSS to ensure sidebar and content are same height (optional) */ 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; }
我保留下面的答案 – 尽pipe支持2.0的编辑使其成为stream体stream体解决scheme，因为它解释了使边栏和内容具有相同高度的背后的概念（评论中指出的提问者的重要部分）
重要
下面的答案是stream体stream体
更新 正如@JasonCapriotti在评论中指出的，这个问题的原始答案（为v1.0创build的）在Bootstrap 2.0中不起作用。 出于这个原因，我已经更新了支持Bootstrap 2.0的答案
为了确保主要内容至less填充屏幕高度的100％，我们需要将html和body的高度设置为100％，并创build一个名为.fill的最小高度为100％的新CSS类：
html, body { height: 100%; } .fill { min-height: 100%; }
然后，我们可以将.fill类添加到我们需要占据100％sceen高度的任何元素。 在这种情况下，我们把它添加到第一个div：
<div class="container-fluid fill"> ... </div>
要确保边栏和内容列具有相同的高度是非常困难和不必要的。 相反，我们可以使用::after伪select器来添加一个filler元素，它会给出两列具有相同高度的错觉：
.filler::after { background-color: inherit; bottom: 0; content: ""; right: 0; position: absolute; top: 0; width: inherit; z-index: -1; }
为了确保.filler元素相对于.filler元素的位置，我们需要添加position: relative对于.fill ：
.fill { min-height: 100%; position: relative; }
最后，将.filler样式添加到HTML中：
HTML
<div class="container-fluid fill"> <div class="row-fluid"> <div class="span3"> ... </div> <div class="span9 hero-unit filler"> ... </div> </div> </div>
笔记
- 如果你需要页面左侧的元素作为填充，那么你需要改变
right: 0到left: 0。
2017年更新
Bootstrap 3 ..
固定stream体布局的一种方法是使用与Bootstrap断点一致的媒体查询，以便只使用固定宽度的列是较大的屏幕，然后在较小的屏幕上响应布局堆栈。
@media (min-width:768px) { #sidebar { min-width: 300px; max-width: 300px; } #main { width:calc(100% - 300px); } }
工作Bootstrap 3 固定stream体演示
Bootstrap 4
现在BS4是flexbox， 固定液体很简单。 只需设置固定列的宽度，并在stream体列上使用.col类。
被接受的答案似乎是stream体stream体。 这是一个实际上是固定stream体的答案：
