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));
}

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


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM