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

是否可以使用Twitter引导创建一个2列布局（固定-流体）布局（）(http://twitter.github.com/bootstrap/)?

您有什么解决方案吗？

-另一个更新-

自从Twitter Bootstrap 2.0版（删除了

.container fluid

类）以来，仅使用Bootstrap类就无法实现两列固定流体布局，但是我已经更新了我的答案，以包括一些可以在您自己的CSS代码中进行的小CSS更改，从而实现这一点可能的

可以使用下面的CSS和从Twitter引导文档页面获取的稍加修改的HTML代码来实现固定的流体结构：

HTML 我保留了下面的答案-尽管支持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%sceen高度的任何元素中。在本例中，我们将其添加到第一个div：

<div class="container-fluid fill">
    ...
</div>

要确保

.filler

元素相对于

.fill

元素定位，我们需要将

位置：relative

添加到

。fill

：

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

最后将

.filler

样式添加到HTML：

HTML

...
...

注释

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

  right:0

  更改为

  left:0

2018年更新
引导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>

相关问答：



---

侧边栏和内容栏的高度必须相同（最小高度：100%）。侧边栏将是静态的（用于导航），内容栏的高度将不同。这意味着它们中的每一个都可能是较长的列。我使用jquery将高度设置为100%，但我更喜欢css解决方案：（css语法不太好，正确的空格让我感到不舒服）我这里缺少什么？这个问题似乎完全正确。引导文档为.container或.container fluid和.row或.row fluid提供了类，这两个类的设计似乎都是为了包装一系列专门固定的或专门流动的列。公认的答案似乎是流体。这里有一个答案实际上是固定的：非常感谢！这帮了大忙！正是我要找的！我很困惑，我以为你要的是固定流体，不是流体？（25%-75%我认为是Bootstrap的例子）我只想指出，虽然这段代码当时可能很棒，但它在Bootstrap 2中不起作用。我和@mikemike一样困惑：在这个答案中链接的两个工作示例似乎都是流体，而不是固定流体？是的，这两个示例都是流体，不是固定流体。这是完美的解决方案。在使浏览器非常小的同时，有没有办法防止列交换？ThanksIt仅在内容div“自然”小于宽度（100%-300px）时才起作用。在我的例子中，内容的“自然”大小大于该大小，并导致contentdiv在侧边栏结束后转到行。Bootstrap3解决方案仍然有效，我只是使用了宽度而不是最小和最大宽度。

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

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

<div class="container-fluid fill">
    <div class="row-fluid">
        <div class="span3">
            ...
        </div>
        <div class="span9 hero-unit filler">
            ...
        </div>
    </div>
</div>

.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>

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