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

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

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

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

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

解决方法

尝试这样: 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/

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

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

原文链接:https://www.f2er.com/css/219170.html

猜你在找的CSS相关文章