css – 如何使用Twitter Bootstrap获得三列布局?

前端之家收集整理的这篇文章主要介绍了css – 如何使用Twitter Bootstrap获得三列布局?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在尝试创建一个三列布局,如下所示:

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

它应该是固定宽度 – 流体宽度 – 固定宽度布局。@H_403_3@

使用Twitter Bootstrap,左边栏和流体内容工作很棒。但是我也需要添加一个右边栏。@H_403_3@

解决方法

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

CSS@H_403_3@

.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@H_403_3@

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

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

每个评论,我更新了我的答案,以携带在右侧和左侧边栏之间切换一个类的可能性。@H_403_3@

现在,您可以在< div class =“content”>中使用以下内容。 DIV:@H_403_3@

CSS@H_403_3@

.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/@H_403_3@

另一个用户询问这个方法是否可以适应最新版本的引导(在编写时是v2.0),所以这里是一个使用它的演示:@H_403_3@

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

猜你在找的CSS相关文章