bootstrap栅格七等分或者其他等分的解决方法

在bootstrap中的栅格系统默认的分割是12等分，如果是把网页进行3、4、6等分进行分割是很简单的，你只需要使用col-md-4、col-md-3、col-md-6就可以轻松实现，那么如果你想把网页分割为7等分或者其他等分，要怎么操作呢？

      这里以7等分为例子说明一下：

1、在HTML中下加一个class：例如下面的例子

        

                   检到
           

0

         

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%;可以根据自己的需要自己设置一个）