24格栅格系统

在老的bootstrap中栅格系统分为12格,原理嘛,就是百分比。在版本升级后,现在bootstrap已经改成了24格,以下是本人计算出来的24格栅格。

//  24 栅格系统
.col-1{
   4.166666667%;
}
.col-2{
   8.333333333%;
}
.col-3{
   12.5%;
}
.col-4{
   16.66666667%;
}
.col-5{
   20.833333333%;
}
.col-6{
   25%;
}
.col-7{
   29.166666667%;
}
.col-8{
   33.33333333%;
}
.col-9{
   37.5%;
}
.col-10{
   41.66666667%;
}
.col-11{
   45.833333333%;
}
.col-12{
   50%;
}
.col-13{
   54.166666667%;
}
.col-14{
   58.33333333%;
}
.col-15{
   62.5%;
}
.col-16{
   66.66666667%;
}
.col-17{
   70.833333333%;
}
.col-18{
   75%;
}
.col-19{
   79.166666667%;
}
.col-20{
   83.33333333%;
}
.col-21{
   87.5%;
}
.col-22{
   91.66666667%;
}
.col-23{
   95.833333333%
}
.col-24{
   100%;
}

附计算方式:

var num = 100/24;
for(var i=1;i<=24;i++){
    console.log((i*num).toFixed(9));
}

 跨平台需自行添加媒体查询

原文地址:https://www.cnblogs.com/hcxy/p/8031566.html