如何使用Twitter Bootstrap获取三列布局？ [英] How do I get a three column layout with Twitter Bootstrap?

问题描述

我想创建一个三列布局，如下所示：

I am trying to create a three column layout that is like the following:

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

应该是固定width - 流体宽度 - 固定宽度布局。

It should be a fixed width - fluid width - fixed width layout.

使用 Twitter Bootstrap ，左侧栏和流畅的内容工作得很好。但我还需要添加一个右边栏。

Using Twitter Bootstrap, the left sidebar and fluid content work great. But I need the addition of a right sidebar too.

推荐答案

这是： 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>

---

根据评论，我更新了我的答案，

---

Per comments, i updated my answer to carry the possibility to switch between right and left sidebar with just a class.

现在可以在< 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在编写时），所以这里是一个演示使用它：

Another user asked about if this method can be adapted to the latest version of the bootstrap (v2.0 at the time of writing) so here is a demo that uses it:

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

这篇关于如何使用Twitter Bootstrap获取三列布局？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！