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

Question

是否可以使用Twitter Bootstrap（http）创建2列布局（固定 - 流体）布局（ http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-21-fixed-fluid/ ） ：//twitter.github.com/bootstrap/）？

你有什么解决办法？

Answer 1

- 另一个更新 -

自Twitter Bootstrap 2.0版本 - 它看到了.container-fluid类的删除 - 以来只能使用引导类实现两列固定流体布局 - 但是我已经更新了我的答案，包括一些小的CSS更改这可以在你自己的CSS代码中进行，这将使这成为可能

可以使用下面的CSS实现固定流体结构，并从Twitter Bootstrap Scaffolding：layouts文档页面中略微修改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;  
}

我保留了下面的答案 - 尽管支持2.0的编辑使其成为流畅的解决方案 - 因为它解释了使侧边栏和内容具有相同高度背后的概念（评论中指出的问题的重要部分）

---

重要

以下答案是流体流体

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

为了确保主要内容至少填满屏幕高度的100％，我们需要将html和body的高度设置为100％并创建一个名为.fill的新css类，其最小高度为100％：

html, body {
    height: 100%;
}

.fill { 
    min-height: 100%;
}

然后我们可以将.fill类添加到我们需要占用高度的100％的任何元素。 在这种情况下，我们将它添加到第一个div：

<div class="container-fluid fill">
    ...
</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 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 。

Answer 2

更新2018年

Bootstrap 4

现在BS4是flexbox， 固定流体很简单。 只需设置固定列的宽度，并使用流体柱上的.col类。

.sidebar {
    width: 180px;
    min-height: 100vh;
}

<div class="row">
    <div class="sidebar p-2">Fixed width</div>
    <div class="col bg-dark text-white pt-2">
        Content
    </div>
</div>

http://www.codeply.com/go/7LzXiPxo6a

Bootstrap 3 ..

固定流体布局的一种方法是使用与Bootstrap的断点对齐的媒体查询，这样您只使用固定宽度的列是更大的屏幕，然后让布局在较小的屏幕上响应...

@media (min-width:768px) {
  #sidebar {
      min-width: 300px;
      max-width: 300px;
  }
  #main {
      width:calc(100% - 300px);
  }
}

工作Bootstrap 3 固定流体演示

相关问答：
固定宽度列，在引导程序中带有容器流体
如何在Bootstrap 4中保持列固定和右滚动，响应？