重要

Question

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

你有解决方案吗？

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％并创建一个名为{{的新css类1}}最小高度为100％：

.fill

然后我们可以将html, body { height: 100%; } .fill { min-height: 100%; }类添加到我们需要占据其高度100％的任何元素。在这种情况下，我们将它添加到第一个div：

.fill

确保侧栏和内容列具有相同的高度非常困难且不必要。相反，我们可以使用<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：

HTML 的

.filler

备注

如果您需要页面左侧的元素作为填充符，则需要将<div class="container-fluid fill"> <div class="row-fluid"> <div class="span3"> ... </div> <div class="span9 hero-unit filler"> ... </div> </div> </div>更改为right: 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);
  }
}

Working Bootstrap 3 Fixed-Fluid Demo

相关Q＆amp; A：
Fixed width column with a container-fluid in bootstrap
How to left column fixed and right scrollable in Bootstrap 4, responsive?

Answer 3

接受的答案似乎是流体流动的。这是一个实际上固定流动的答案：

https://stackoverflow.com/a/9739345/237091

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

3 个答案:

HTML

CSS

重要

下面的答案是液体流体