我想在我正在构建的页面上有5个相等的列，我似乎无法理解5列网格在这里是如何使用的: http://web.archive.org/web/20120416024539/http://domain7.com/mobile/tools/bootstrap/responsive
上面演示的五列网格是twitter引导框架的一部分吗?
当前回答
创建5个类为col-sm-2的元素，并在第一个元素中添加类为col-sm-offset-1
附注:这将不是全宽度的(它将从屏幕的左右略微缩进)
代码应该看起来像这样
<div class="col-sm-2 col-sm-offset-1"></div>
<div class="col-sm-2"></div>
<div class="col-sm-2"></div>
<div class="col-sm-2"></div>
<div class="col-sm-2"></div>
其他回答
有人使用bootstrap-sass (v3)，下面是使用bootstrap混合的5列的简单代码:
.col-xs-5ths {
@include make-xs-column(2.4);
}
@media (min-width: $screen-sm-min) {
.col-sm-5ths {
@include make-sm-column(2.4);
}
}
@media (min-width: $screen-md-min) {
.col-md-5ths {
@include make-md-column(2.4);
}
}
@media (min-width: $screen-lg-min) {
.col-lg-5ths {
@include make-lg-column(2.4);
}
}
确保你已经包括:
@import "bootstrap/variables";
@import "bootstrap/mixins";
与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 >
下面是@machineaddict和@Mafnah回答的组合，为Bootstrap 3重写(到目前为止对我来说很好):
@media (min-width: 768px){
.fivecolumns .col-md-2, .fivecolumns .col-sm-2, .fivecolumns .col-lg-2 {
width: 20%;
*width: 20%;
}
}
@media (min-width: 1200px) {
.fivecolumns .col-md-2, .fivecolumns .col-sm-2, .fivecolumns .col-lg-2 {
width: 20%;
*width: 20%;
}
}
@media (min-width: 768px) and (max-width: 979px) {
.fivecolumns .col-md-2, .fivecolumns .col-sm-2, .fivecolumns .col-lg-2 {
width: 20%;
*width: 20%;
}
}
不需要编辑CSS的最简单的解决方案是:
<div class="row">
<div class="btn-group btn-group-justified">
<div class="btn-group">
<div class="col-sm-12">Column 1</div>
</div>
<div class="btn-group">
<div class="col-sm-12">Column 2</div>
</div>
<div class="btn-group">
<div class="col-sm-12">Column 3</div>
</div>
<div class="btn-group">
<div class="col-sm-12">Column 4</div>
</div>
<div class="btn-group">
<div class="col-sm-12">Column 5</div>
</div>
</div>
</div>
如果你需要这些打破任何断点，只要使btn-group块。希望这能帮助到一些人。
这个很棒:http://www.ianmccullough.net/5-column-bootstrap-layout/
只做:
<div class="col-xs-2 col-xs-15">
和CSS:
.col-xs-15{
width:20%;
}
