css - 如何使用 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

- 另一个更新-

自从 Twitter Bootstrap 版本 2.0 - 删除了 .container-fluid 类 - 不可能仅使用实现两列固定流体布局 Bootstrap 类 - 但是我已经更新了我的答案以包括一些小的 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>

要确保 Sidebar 和 Content 列具有相同的高度是非常困难和不必要的。相反，我们可以使用 ::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 { 
    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。