我正在尝试创建一个如下所示的三列布局：
http://www.manisheriar.com/holygrail/index.htm
应该是fixed width - fluid width - fixed width布局。
使用Twitter Bootstrap，左侧边栏和流畅内容效果很好。但我也需要添加right sidebar。
答案 0 :(得分：31)
试试这个：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），所以这是一个使用它的演示：
答案 1 :(得分：2)
对于任何感兴趣的人，这里有一个最新的Bootstrap 3版本的例子......
您只需将.sidebar-nav-fixed添加到左右col-md-3列内的DIV中：
.sidebar-nav-fixed {
width:20%;
}
答案 2 :(得分：1)
这是我能找到的最好的。
http://www.bootply.com/9logoZy2fv
以下是代码：
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="http://bootply.com">Bootply</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Responsive</a></li>
<li><a href="#">Layout</a></li>
<li><a href="#">Example</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<!--sidebar-->
<div class="sidebar-nav-fixed" data-spy="affix" data-offset-top="140">
<ul class="nav nav-list">
<li><a href="#">Home</a></li>
<li><a href="#">Responsive</a></li>
<li><a href="#">Layouts</a></li>
<li class="divider"></li>
<li><a href="#">Bootstrap</a></li>
<li><a href="#">Resources</a></li>
<li><a href="#">Modal</a></li>
<li><a href="#">Carousel</a></li>
<li class="divider"></li>
<li><a href="#">Typeahead</a></li>
<li><a href="#">Themes</a></li>
<li><a href="#">Template</a></li>
<li><a href="#">Affix</a></li>
<li class="divider"></li>
<li><a href="#">Bootstrap 3</a></li>
<li><a href="#">Sidebar</a></li>
<li><a href="#">Grid</a></li>
<li><a href="#">Column</a></li>
<li class="divider"></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</div>
<div class="span3">
<!--2nd column-->
<div id="midCol" data-spy="affix" data-offset-top="250">
<img src="//placehold.it/300x150/449955/FFF">
<h4 class="caption">Image Caption <span class="pull-right"><i class="icon-twitter"></i></span></h4>
<hr>
<img src="//placehold.it/300x150/2255EE/EEE">
<h4 class="caption">Image Caption</h4>
<hr>
<img src="//placehold.it/300x150/992233">
<h4 class="caption">Image Caption</h4>
<hr>
<img src="//placehold.it/300x150/555555/FFF">
<h4 class="caption">Image Caption</h4>
<hr>
<img src="//placehold.it/300x150/d9d9d9/EEE">
<h4 class="caption">Image Caption</h4>
<hr>
</div><!--/middleCol-->
</div><!--/span3-->
<div class="span7">
<div class="well"><h1>3-Column Layout</h1><p>This is a template example that uses the Bootstrap framework to create a responsive three-column layout.
The left column (narrow) contains a sidebar, the center column (mid) contains features with image/caption, and the right column (widest) contains content.
</p>
<a href="http://www.bootply.com/63275" class="btn btn-primary">Details</a>
<span class="badge pull-right">100</span>
</div>
<div class="well"><h1>Affix</h1><p>This layout utilizes the <b>Bootstrap Affix</b> component using data attributes. You can see
the Affix plugin in action as you scroll down the page. The leftmost side is "pinned" until 140px is reached, and the middle column is un-pinned once 250px is reached.
See the CSS <code>.affix</code> and <code>.affix-top</code> classes to see how this works.
</p>
<button class="btn">Details</button>
</div>
<div class="well"><h1>Bootply</h1><p>This example layout is compliments of Bootply -- the Bootstrap playground.
Bootply lets you play with JavaScript, HTML, CSS and Bootstrap in a simple Web-based editor. Bootply enables you to
easily include popular libraries, plugins, extensions and frameworks such as jQuery, FontAwesome, AngularJS, FuelUX and Google Maps.
</p>
<a href="http://www.bootply.com" class="btn">Details</a>
</div>
<div class="well"><h1>HTML5 / CSS3</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate.
Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis
dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan.
<a href="http://www.bootply.com/63275">Edit this on Bootply</a>.</p>
<button class="btn">Details</button>
</div>
<div class="well"><h1>Snippets</h1><p>Bootply is also a collaborative tool that enables sharing of snippets. There is a repository of more than 1000 Bootstrap-ready code snippets. Find
code snippets demonstrate common Bootstrap components such as the carousel (sliders), modal, typeahead, navbar, typography, buttons, tabs and icons.</p>
<a href="http://www.bootply.com" class="btn">Details</a>
</div>
<div class="well"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate.
Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis
dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan.
Aliquam in felis sit amet augue.</p>
<button class="btn">Details</button>
</div>
</div>
</div>
</div>
和CSS：
body {
padding-top: 60px;
}
@media (max-width: 979px) {
body {
padding-top: 0px;
}
}
/* uncomment this section to make the sidebar un-pin
.affix-top {
top:60px;
position:fixed;
}
.affix {
position:static;
}
*/
.affix-top {
top:60px;
position:fixed;
}
/* custom theme */
#midCol.affix-top {
position:fixed;
margin-left:-18px;
margin-right:10px;
}
#midCol.affix-bottom {
position:static;
}
#midCol.affix {
position:static;
}
@media (max-width:1190px) {
.affix,.affix-top,#midCol.affix,#midCol.affix-top {
position:static;
}
}
.caption {
background-color:#eee;
padding:10px;
margin:0;
color:#555;
}
答案 3 :(得分：1)
你走了：
此解决方案使用包含3列的表格布局：左，中，右。 outerTable的宽度为100％，左右列具有固定的像素宽度，中间的列缩放以填充剩余的空间。中间列有一个Bootstrap 3容器，里面有一堆样本col-xx-1。调整浏览器宽度的大小，以便看到标准的bootstrap网格大小调整过程（即当浏览器的宽度<1200等时，col-lg-1将变为全宽... < / p>
顺便说一下，在bootply＆＃34;渲染＆＃34;中，浏览器调整大小更容易。模式：
还有一些引导内容：