bootstrap（柵格）

col-md-offset-*、col-md-push-*、col-md-pull-*

offset 補償（課本上或相關教程上通常都把這個叫作「偏移」），其實就是在左側補列（1~11列）

push 推

pull 拉

偏移、推、拉，都有一個參照物，即相對的位置，那就是左側， 相對於左側偏移、推、拉 

寫法好比：

col-md-offset-3（在左側補充3列）
col-md-push-8（從左側往右側推8列）
col-md-pull-2（往左側拉2列）

從效果上看offset和push效果同樣，其實採起的方法是不一樣的，offset是直接在左側補列達到偏移的效果，push是經過位置移動達到移動的效果

 

關鍵字解釋

一、col-column：列；

二、xs-maxsmall：超小； sm-small：小；  md-medium：中等；  lg-large：大；

三、-*表示佔列，即佔自動每行row分12列柵格系統比；

四、.col-xs-*超小屏幕 手機 (<768px)，超小屏幕時使用；

     .col-sm-*小屏幕 平板 (≥768px)，小屏幕時使用；

     .col-md-*中等屏幕 桌面顯示器 (≥992px)(柵格參數)，中等屏幕時使用；

     .col-lg-*大屏幕 大桌面顯示器 (≥1200px)，大屏幕時使用。

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

六、反推，若是咱們要在小屏幕上並排顯示3個div(12/3個=每一個佔4 列 )，則col-xs-4；在大屏幕上顯示6個div(12/6個=每一個佔2列 ) ，則 col-md-2；這樣咱們就能夠控制咱們本身想要的什麼排版了。