我想在我正在构建的页面上有5个相等的列，我似乎无法理解5列网格在这里是如何使用的: http://web.archive.org/web/20120416024539/http://domain7.com/mobile/tools/bootstrap/responsive
上面演示的五列网格是twitter引导框架的一部分吗?
当前回答
保持原始的12列引导，不要自定义它。你唯一需要做的修改是一些css之后的原始引导响应css，像这样:
下面的代码已经为Bootstrap 2.3.2进行了测试:
<style type="text/css">
/* start of modification for 5 columns */
@media (min-width: 768px){
.fivecolumns .span2 {
width: 18.297872340425532%;
*width: 18.2234042553191494%;
}
}
@media (min-width: 1200px) {
.fivecolumns .span2 {
width: 17.9487179487179488%;
*width: 17.87424986361156592%;
}
}
@media (min-width: 768px) and (max-width: 979px) {
.fivecolumns .span2 {
width: 17.79005524861878448%;
*width: 17.7155871635124022%;
}
}
/* end of modification for 5 columns */
</style>
和html:
<div class="row-fluid fivecolumns">
<div class="span2">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn" href="#">View details »</a></p>
</div>
<div class="span2">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn" href="#">View details »</a></p>
</div>
<div class="span2">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn" href="#">View details »</a></p>
</div>
<div class="span2">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn" href="#">View details »</a></p>
</div>
<div class="span2">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn" href="#">View details »</a></p>
</div>
</div>
注意:即使span2乘以5不等于12列，你明白了吧:)
可以在这里找到一个工作示例http://jsfiddle.net/v3Uy5/6/
其他回答
用于引导4
Bootstrap 4现在默认使用flexbox，所以你可以直接使用它的神奇力量。查看自动布局列，根据嵌套的列的数量动态调整宽度。
这里有一个例子:
<div class="row">
<div class="col">
1 of 5
</div>
<div class="col">
2 of 5
</div>
<div class="col">
3 of 5
</div>
<div class="col">
4 of 5
</div>
<div class="col">
5 of 5
</div>
</div>
演示工作
引导3
一个奇妙的全宽5列布局与Twitter引导创建在这里。
这是迄今为止最先进的解决方案，因为它与Bootstrap 3无缝地工作。它允许您一遍又一遍地重用这些类，并与当前的Bootstrap类一起用于响应式设计。
CSS: 将其添加到全局样式表中，甚至添加到bootstrap.css文档的底部。
.col-xs-5ths,
.col-sm-5ths,
.col-md-5ths,
.col-lg-5ths {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
.col-xs-5ths {
width: 20%;
float: left;
}
@media (min-width: 768px) {
.col-sm-5ths {
width: 20%;
float: left;
}
}
@media (min-width: 992px) {
.col-md-5ths {
width: 20%;
float: left;
}
}
@media (min-width: 1200px) {
.col-lg-5ths {
width: 20%;
float: left;
}
}
好好利用它!例如，如果你想创建一个div元素，它在中等屏幕上表现为五列布局，而在较小的屏幕上表现为两列布局，你只需要使用这样的东西:
<div class="row">
<div class="col-md-5ths col-xs-6">
...
</div>
</div>
工作演示-展开框架，看看列变得有响应。
另一个演示-将新的col-*-5ths类与其他类合并，如col-*-3和col-*-2。调整帧的大小，在响应视图中看到它们都改变为col-xs-6。
为5列布局创建自定义引导下载
进入Bootstrap 2.3.2(或Bootstrap 3)自定义页面，设置以下变量(不要输入分号):
@gridColumns: 5;
@gridColumnWidth: 172px;
@gridColumnWidth1200: 210px;
@gridColumnWidth768: 128px;
@gridGutterWidth768: 21px;
下载您的构建。这个网格将适合默认的容器，(几乎)保留默认的沟槽宽度。
注意:如果你使用LESS，更新变量。而不是更少。
.col-xs-2-4 { position: relative; float: left; width: 20%; min-height: 1px; padding-left: 15px; padding-right: 15px; } .col-sm-2-4 { position: relative; min-height: 1px; padding-left: 15px; padding-right: 15px; } @media (min-width: 768px) { .col-sm-2-4 { float: left; width: 20%; } } .col-md-2-4 { position: relative; min-height: 1px; padding-left: 15px; padding-right: 15px; } @media (min-width: 992px) { .col-md-2-4 { float: left; width: 20%; } } .col-lg-2-4 { position: relative; min-height: 1px; padding-left: 15px; padding-right: 15px; } @media (min-width: 1200px) { .col-lg-2-4 { float: left; width: 20%; } }
自举网格系统分为12个网格。所以我把它分成两个网格(7+5)。这7和5也包含满12格。这就是为什么我分开了7(4+4+4)和5(6+6)，这样就可以得到所有的内容，很简单
HTML
<div class="col-sm-12">
<div class="row">
<div class="col-sm-7 five-three">
<div class="row">
<div class="col-sm-4">
Column 1
</div>
<div class="col-sm-4">
Column 2
</div>
<div class="col-sm-4">
Column 3
</div>
</div>
</div>
<div class="col-sm-5 five-two">
<div class="row">
<div class="col-sm-6">
Col 4
</div>
<div class="col-sm-6">
Col 5
</div>
</div>
</div>
</div>
</div>
CSS
div.col-sm-7.five-three {
width: 60% !important;
}
div.col-sm-5.five-two {
width: 40% !important;
}
与flexbox http://output.jsbin.com/juziwu
.flexrow { 显示:flex; 背景:浅灰色;/ * * /调试 ｝ .flexrow > * { flex: 1; 保证金:1 em; 大纲:自动绿色; ｝ < div class = " flexrow”> < div >…< / div > < div >…< / div > < div >…< / div > < div >。< br >。< / div > < div >…< / div > < / div >
