在老的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)); }
跨平台需自行添加媒体查询