1、col是column簡寫：列；

2、xs是maxsmall簡寫：超小， sm是small簡寫：小，  md是medium簡寫：中等， lg是large簡寫：大；

3、-* 表示占列數，即占每行row分12列柵格系統比；

4、.col-xs-* 超小屏幕如手機 （<768px）時使用；

     .col-sm-* 小屏幕如平板 （768px ≤ 寬度 ＜992px）時使用；

     .col-md-* 中等屏幕如普通顯示器 （992px ≤ 寬度 ＜ 1200px）時使用；

     .col-lg-* 大屏幕如大顯示器 （≥1200px）時使用。

解釋

1、柵格系統都會自動的把每行row分為12列， col-xs-*、col-sm-* 、col-md-*和.col-lg-* 后面跟的參數表示在當前的屏幕中的占列數。例如 <div class="col-xs-6 col-md-3"></div> 這個div在屏幕中占的位置是： .col-xs-6 在超小屏幕中占6列，也就是屏幕的一半（12/6列=2個div）， .col-md-3 在中等屏幕中占3列也就是1/4（12/3列=4個div）。

2、反推，如果我們要在移動端并排顯示3個div(12/3個=每個占4 列 )，則col-xs-4；在PC端上顯示6個div(12/6個=每個占2列 ) ，則 col-md-2。

官網地址：https://www.50yun.top

免費注冊：https://www.50yun.top/col-reg/

趕快注冊 - 創建自己的線上數字化運營系統吧