我想在我正在构建的页面上有5个相等的列,我似乎无法理解5列网格在这里是如何使用的: http://web.archive.org/web/20120416024539/http://domain7.com/mobile/tools/bootstrap/responsive
上面演示的五列网格是twitter引导框架的一部分吗?
我想在我正在构建的页面上有5个相等的列,我似乎无法理解5列网格在这里是如何使用的: http://web.archive.org/web/20120416024539/http://domain7.com/mobile/tools/bootstrap/responsive
上面演示的五列网格是twitter引导框架的一部分吗?
当前回答
.col-half-offset{
margin-left:4.166666667% !important;
float: left;
}
<div className="row1 marginTop20">
<div className="col-xs-12 col-sm-2 col-md-2">
1
</div>
<div className="col-xs-12 col-sm-2 col-md-2 col-half-offset">
2
</div>
<div className="col-xs-12 col-sm-2 col-md-2 col-half-offset">
3
</div>
<div className="col-xs-12 col-sm-2 col-md-2 col-half-offset">
4
</div>
<div className="col-xs-12 col-sm-2 col-md-2 col-half-offset">
5
</div>
<div className="clearfix"></div>
</div>
其他回答
更新2019
引导4.1 +
下面是5个相同的全宽列(没有额外的CSS或SASS),使用自动布局网格:
<div class="container-fluid">
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="col">4</div>
<div class="col">5</div>
</div>
</div>
http://codeply.com/go/MJTglTsq9h
这个解决方案是有效的,因为Bootstrap 4现在是flexbox。你可以让5列在相同的.row中使用换行符,如<div class="col-12"></div>或<div class="w-100"></div>每5列。
也请参阅:引导- 5列布局
下面是@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%;
}
}
.col-half-offset{
margin-left:4.166666667% !important;
float: left;
}
<div className="row1 marginTop20">
<div className="col-xs-12 col-sm-2 col-md-2">
1
</div>
<div className="col-xs-12 col-sm-2 col-md-2 col-half-offset">
2
</div>
<div className="col-xs-12 col-sm-2 col-md-2 col-half-offset">
3
</div>
<div className="col-xs-12 col-sm-2 col-md-2 col-half-offset">
4
</div>
<div className="col-xs-12 col-sm-2 col-md-2 col-half-offset">
5
</div>
<div className="clearfix"></div>
</div>
在我看来,像这样使用Less语法更好。 这个答案是基于@fizzix的回答
这样列使用用户可能覆盖的变量(@grid-gutter-width, media breakpoints), 5列的行为与12列网格的行为匹配。
/*
* Special grid for ten columns,
* using its own scope
* so it does not interfere with the rest of the code
*/
& {
@import (multiple) "../bootstrap-3.2.0/less/variables.less";
@grid-columns: 5;
@import (multiple) "../bootstrap-3.2.0/less/mixins.less";
@column: 1;
.col-xs-5ths {
.make-xs-column(@column);
}
.col-sm-5ths {
.make-sm-column(@column);
}
.col-md-5ths {
.make-md-column(@column);
}
.col-lg-5ths {
.make-lg-column(@column);
}
}
/***************************************/
/* Using default bootstrap now
/***************************************/
@import (multiple) "../bootstrap-3.2.0/less/variables.less";
@import (multiple) "../bootstrap-3.2.0/less/mixins.less";
/* ... your normal less definitions */
对于@lightswitch的回答,如果我们需要使用更少迭代的5列网格
.make-fifth-col(@index) when (@index > 0) {
@class-name: ~".col-md-5th-@{index}";
@{class-name} {
.make-md-column(1.2*@index);
}
.make-fifth-col(@index - 1);
}
.make-fifth-col(10);
这将生成css类。col-md-5th-1, col-md-5th-2, col-md-5th-3,等等,对应10%,20%,30%…分别