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

Question

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

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

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

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

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"> 中使用以下内容分区:

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/