如何使用Twitter Bootstrap获得三列布局？

Question

我正在尝试创建一个三列布局,如下所示:

http://www.manisheriar.com/holygrail/index.htm

它应该是fixed width- fluid width- fixed width布局.

使用时Twitter Bootstrap,左侧边栏和流体内容工作得很好.但我也需要增加一个right sidebar.

Answer 1

试试这个:http://jsfiddle.net/andresilich/6vPqA/2/

CSS

.container-fluid > .sidebar {
    position: relative;
    top: 0;
    left:auto;
    width: 220px; /* width of sidebar */
}

.left {
    float:left;
}

.right {
    float:right;
}

.container-fluid > .content {
    margin: 0 240px; /* width of sidebars + 10px of margin */
}

HTML

<div class="sidebar left">
    <div class="well">
      <h5>Sidebar</h5>
      .....
    </div>
</div>

<div class="sidebar right">
    <div class="well">
      <h5>Sidebar</h5>
      .....
    </div>
</div>

根据评论,我更新了我的答案,可以只用一个班级在左右侧边栏之间切换.

现在您可以在<div class="content">div中使用以下内容:

CSS

.fixed-fluid {
    margin-left: 240px;
}
.fluid-fixed {
    margin-right: 240px;
    margin-left:auto !important;
}
.fixed-fixed {
    margin: 0 240px;
}

演示:http://jsfiddle.net/andresilich/6vPqA/3/show/ 编辑:http://jsfiddle.net/andresilich/6vPqA/3/

另一个用户询问这个方法是否可以适应最新版本的bootstrap(写作时的v2.0),所以这是一个使用它的演示:

http://jsfiddle.net/andresilich/6vPqA/13/