CSS 如何使用 Twitter Bootstrap 获得三列布局？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8947920/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I get a three column layout with Twitter Bootstrap?
提问by cbmeeks
I am trying to create a three column layout that is like the following:
我正在尝试创建一个三列布局，如下所示：
http://www.manisheriar.com/holygrail/index.htm
http://www.manisheriar.com/holygrail/index.htm
It should be a fixed width- fluid width- fixed widthlayout.
它应该是一个fixed width- fluid width-fixed width布局。
Using Twitter Bootstrap, the left sidebar and fluid content work great. But I need the addition of a right sidebartoo.
使用Twitter Bootstrap，左侧边栏和流畅的内容效果很好。但我也需要添加一个right sidebar。
回答by Andres Ilich
Try this: http://jsfiddle.net/andresilich/6vPqA/2/
试试这个：http: //jsfiddle.net/andresilich/6vPqA/2/
CSS
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
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.
根据评论，我更新了我的答案，以便可以在右侧和左侧边栏之间切换，只需一个班级。
Now you can use the following in the <div class="content">div:
现在您可以在<div class="content">div 中使用以下内容：
CSS
CSS
.fixed-fluid {
margin-left: 240px;
}
.fluid-fixed {
margin-right: 240px;
margin-left:auto !important;
}
.fixed-fixed {
margin: 0 240px;
}
Demo: http://jsfiddle.net/andresilich/6vPqA/3/show/Edit: http://jsfiddle.net/andresilich/6vPqA/3/
演示：http: //jsfiddle.net/andresilich/6vPqA/3/show/编辑：http: //jsfiddle.net/andresilich/6vPqA/3/
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:
另一位用户询问此方法是否可以适应最新版本的引导程序（在撰写本文时为 v2.0），因此这里有一个使用它的演示：
回答by Zim
For anyone interested, here is an example for the latest Bootstrap 3 version...
对于任何有兴趣的人，这里是最新 Bootstrap 3 版本的示例...
http://bootply.com/101100
http://bootply.com/101100
You just need to add the .sidebar-nav-fixedto a DIV inside the left and right col-md-3columns:
您只需要在.sidebar-nav-fixed左右col-md-3列中添加一个 DIV 即可：
.sidebar-nav-fixed {
width:20%;
}
回答by thouliha
This is the best I could find.
这是我能找到的最好的。
http://www.bootply.com/9logoZy2fv
http://www.bootply.com/9logoZy2fv
Here's the code:
这是代码：
<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>
and the CSS:
和 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;
}
回答by Ilan
Here you go:
干得好：
This solution uses a table layout with 3 columns: left, middle, right. The outerTable has width 100%, the left and right columns have fixed pixel widths, and the middle column scales to fill the remaining space. The middle column has a Bootstrap 3 container with a bunch of sample col-xx-1's in them. Resize your browser width in order to see the standard bootstrap grid sizing process taking place (i.e. the col-lg-1's will change to full width when the browser's width is < 1200 etc...
此解决方案使用具有 3 列的表格布局：左、中、右。outerTable 的宽度为 100%，左右列具有固定的像素宽度，中间列缩放以填充剩余空间。中间一列有一个 Bootstrap 3 容器，里面有一堆示例 col-xx-1。调整浏览器宽度以查看标准引导网格大小调整过程（即，当浏览器宽度小于 1200 时，col-lg-1 将变为全宽等...
BTW it's easier to play with browser resizing in bootply's "render" mode:
顺便说一句，在 bootply 的“渲染”模式下调整浏览器大小会更容易：
And some more bootstrappy content:
还有一些引导程序的内容：
