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