我想在我正在构建的页面上有5个相等的列，我似乎无法理解5列网格在这里是如何使用的: http://web.archive.org/web/20120416024539/http://domain7.com/mobile/tools/bootstrap/responsive
上面演示的五列网格是twitter引导框架的一部分吗?
当前回答
为5列布局创建自定义引导下载
进入Bootstrap 2.3.2(或Bootstrap 3)自定义页面，设置以下变量(不要输入分号):
@gridColumns: 5;
@gridColumnWidth: 172px;
@gridColumnWidth1200: 210px;
@gridColumnWidth768: 128px;
@gridGutterWidth768: 21px;
下载您的构建。这个网格将适合默认的容器，(几乎)保留默认的沟槽宽度。
注意:如果你使用LESS，更新变量。而不是更少。
其他回答
自举网格系统分为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;
}
Bootstrap或其他网格系统并不总是意味着更简单和更好。 在你的.container或.row(保持你的响应式布局)中，你可以创建5个div(使用类.col f.e.)，并像这样添加css: .col { 宽度:20%; 浮:左 };
更新:现在最好使用flexbox
如果使用bootstrap 4和SASS (+ bootstrap变量)，您可以使用以下简化的答案:
@each $breakpoint in map-keys($grid-breakpoints) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
.col#{$infix}-fifth {
@extend %grid-column;
}
@include media-breakpoint-up($breakpoint, $grid-breakpoints) {
.col#{$infix}-fifth {
flex: 0 0 20%;
max-width: 20%;
}
}
}
还支持断点，您可以简单地添加新的.col#{$infix}-xxx类
<div class="equal row-fluid">
<div class="span2"></div>
<div class="span2"></div>
<div class="span2"></div>
<div class="span2"></div>
<div class="span2"></div>
</div>
.equal .span2 {
width: 20%;
}
对于twitter bootstrap 3，这是最简单的方法来实现这一点:
<section class="col col-sm-3" style="width: 20%;">
<section class="col col-sm-3" style="width: 20%;">
<section class="col col-sm-3" style="width: 20%;">
<section class="col col-sm-3" style="width: 20%;">
<section class="col col-sm-3" style="width: 20%;">
