24格栅格系统

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

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