bootstrap中的col
阿新 • • 發佈:2019-01-02
作用:根據螢幕大小,選擇佈局樣式。
基礎:
col是column簡寫:列;
-* 表示佔列數,即佔每行row分12列柵格系統比;
具體:
xs是maxsmall簡寫:超小 col-xs-* 超小螢幕如手機 (<768px)時使用
sm是small簡寫:小 col-sm-* 小螢幕如平板 (768px ≤ 寬度 <992px)時使用
md是medium簡寫:中等 col-md-* 中等螢幕如普通顯示器 (992px ≤ 寬度 < 1200px)時使用
lg是large簡寫:大 col-lg-* 大螢幕如大顯示器 (≥1200px)時使用
進階:
col-*-offset 使一個column向右偏移某距離
col-*-push 使一個column向右偏移某距離
col-*-pull 使一個column向左偏移某距離
區別:
1,col-*-offset叫做偏移列,col-*-push和col-*-pull叫做列排序。
2,同樣向右偏移,col-*-offset操作,會“擠著”後面的列一起移動,而col-*-push不會影響後面列的位置。
理論來源:
col-*-offset
使用的是margin-left
屬性實現右移——>會造成該列在文件流中的位置改變。col-*-push
使用的是float
+ left
屬性實現右移——>不會造成列在文件流中的位置改變,只是顯示時體現。