1.實現效果圖

2.復制bootstrap源碼

根目錄下：bootstrap/less/ grid.less variables.less

根目錄下：bootstrap/less/mixins grid.less grid-framework.less clearfix.less

3.修改grid-framework.less中的col- 替換為：你的任意name-

4.注意clearfix{} 繼承不可以在{}之前加()

5.柵格系統主css實現，個人采用Koala考拉生成

6.自定義css【box-sizing:border-box】

* {
  margin: 0;
  padding: 0;
  /*自定義柵格系統需要開啟*/
  box-sizing: border-box;
  /**
       min-width(閾值)        container-width
                    閾值>=1200px                 1170px
      992px <=閾值 <1200px          970px
      768px <=閾值  <992px           750px
                    閾值<768px             auto，沒有padding和margin
     */
}
* .container-fluid {
  background: tomato;
  color: white;
}
* .container {
  background: steelblue;
  color: white;
}
* .container div[class|=col] {
  border: 1px solid;
  background: seagreen;
}

1234567891011121314151617181920212223242526

7.Html引用自定義css

作者 | Bootstrap 5 官方博客

譯者 | 王強

策劃 | 蔡芳芳

轉發鏈接：https://mp.weixin.qq.com/s/P2YeOjPwzCN-strs1m_z5Q