我想在我正在构建的页面上有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>
其他回答
如果你不需要完全相同的列宽度,你可以尝试使用嵌套创建5列:
<div class="container">
<div class="row">
<div class="col-xs-5">
<div class="row">
<div class="col-xs-6 column">Column 1</div>
<div class="col-xs-6 column">Column 2</div>
</div>
</div>
<div class="col-xs-7">
<div class="row">
<div class="col-xs-4 column">Column 3</div>
<div class="col-xs-4 column">Column 4</div>
<div class="col-xs-4 column">Column 5</div>
</div>
</div>
</div>
</div>
斯菲德尔
前两列的宽度为5/12 * 1/2 ~ 20.83%
后三列:7/12 * 1/3 ~ 19.44%
这样的hack在许多情况下给出了可接受的结果,不需要任何CSS更改(我们只使用本机引导类)。
使用5个div,类为span2,并给第一个类为offset1。
<div class="row-fluid">
<div class="span2 offset1"></div>
<div class="span2"></div>
<div class="span2"></div>
<div class="span2"></div>
<div class="span2"></div>
</div>
瞧! 五列等距居中。
在引导3.0中,这段代码看起来像
<div class="row">
<div class="col-md-2 col-md-offset-1"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
</div>
更新
因为bootstrap 4.0默认使用Flexbox:
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</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";
下面是@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%;
}
}
为5列布局创建自定义引导下载
进入Bootstrap 2.3.2(或Bootstrap 3)自定义页面,设置以下变量(不要输入分号):
@gridColumns: 5;
@gridColumnWidth: 172px;
@gridColumnWidth1200: 210px;
@gridColumnWidth768: 128px;
@gridGutterWidth768: 21px;
下载您的构建。这个网格将适合默认的容器,(几乎)保留默认的沟槽宽度。
注意:如果你使用LESS,更新变量。而不是更少。