如何使用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和body100%,并创建一个新的名为CSS类.fill具有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);
  }
}

Working Bootstrap 3 Fixed-Fluid Demo

相关问答:
固定宽度列在引导程序中带有容器流体
如何在Bootstrap 4中将列固定并向右滚动,响应？