在bootstrap中的栅格系统默认的分割是12等分,如果是把网页进行3、4、6等分进行分割是很简单的,你只需要使用col-md-4、col-md-3、col-md-6就可以轻松实现,那么如果你想把网页分割为7等分或者其他等分,要怎么操作呢?
这里以7等分为例子说明一下:
1、在HTML中下加一个class:例如下面的例子
<div class=".col-md-1-7 col-sm-1-7 col-xs-1-7">
<span class="count_top"><i class="fa fa-user"></i>检到</span>
<div class="count" >0</div>
</div>
2、加入一个css样式:
/*七等分*/
.col-md-1-7 {
width: 13.29%; //
13.29%;可以根据自己的需要自己设置一个
float: left;
}
.col-xs-1-7, .col-sm-1-7, .col-md-1-7, .col-lg-1-7 {
min-height: 1px;
padding-left: 10px;
padding-right: 10px;
position: relative;
}
@media ( min-width : 768px) {
.col-sm-1-7 {
width: 13.29%; //13.29%;可以根据自己的需要自己设置一个
float: left;
}
}
@media ( min-width : 992px) {
.col-md-1-7 {
width: 13.29%; //13.29%;可以根据自己的需要自己设置一个
float: left;
}
}
@media ( min-width : 1200px) {
.col-lg-1-7 {
width: 13.29%;
float: left;
}
}
3、其他等分也是一样的原理,只需要给一下width的数值就可以了(width: 13.29%; //13.29%;可以根据自己的需要自己设置一个)