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

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

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值