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

Question

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

你有什么解决办法吗？

Answer 1

2018 年更新

引导程序 4

既然 BS4 是 flexbox，fixed-fluid 就很简单了。只需设置固定列的宽度，在流体列上使用.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

引导程序 3..

fixed-fluid 布局的一种方法是使用与 Bootstrap 的断点对齐的媒体查询，以便您仅在较大的屏幕上使用固定宽度的列，然后让布局在较小的屏幕上响应式堆叠。 ..

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

Working Bootstrap 3 Fixed-Fluid Demo

相关问答：
Fixed width column with a container-fluid in bootstrap
How to left column fixed and right scrollable in Bootstrap 4, responsive?

Answer 2

- 另一个更新-

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

可以使用下面找到的 CSS 和从 Twitter Bootstrap Scaffolding : layouts 文档页面中获取的略微修改的 HTML 代码来实现固定流体结构： p>

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 的编辑使其成为流体 - 流体解决方案 - 因为它解释了使侧边栏和内容高度相同背后的概念（提问者问题的重要部分在 cmets 中确定）

---

重要

下面的答案是流体-流体

更新 正如@JasonCapriotti 在 cmets 中指出的那样，这个问题的原始答案（为 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;
}

最后在 HTML 中添加 .filler 样式：

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。