在研究柵格系統,需要藉助谷歌瀏覽器中的裝置模式這個功能.
當螢幕寬度在[0,768)區間中,col-xs-*起作用;此時,.container的寬度是自動的,總的寬度(算上邊框)就是螢幕的寬度.
當螢幕寬度在[768,992)區間中,col-sm-*起作用;此時,.container的寬度是固定的750 px(算上邊框).
當螢幕寬度[992,1200),col-md-*起作用;此時,.container的寬度是固定的970 px(算上邊框).
當螢幕寬度[1200,+∞),col-lg-*起作用;此時,.container的寬度是固定的1170 px(算上邊框).
下面使螢幕寬度由小變大,進行5個測試.
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-4 col-lg-6">col-sm-6 col-md-4 col-lg-6</div>
<div class="col-sm-6 col-md-8 col-lg-6">col-sm-6 col-md-8 col-lg-6</div>
</div>
</div>1.使螢幕寬度為767,此時col-xs-*起作用;57分,這裡谷歌瀏覽器的裝置模式不起作用了,就直接縮放網頁來測試.
2.使螢幕寬度為991,此時col-sm-*起作用;66分,沒毛病.
3.使螢幕寬度為992此時col-md-*起作用;48分.
4.使螢幕寬度為1199,此時還是col-md-*起作用;還是48分.
5.使螢幕寬度為1201,此時是col-lg-*起作用;66分.
把上面的.container改成.container-fluid之後,無論螢幕寬度是多少,div的寬度總是和螢幕寬度一致,也就是變成了100%的寬度.
那麼假設只設定了col-md-*,當螢幕寬度超過1119,會怎樣?驗證一下.
<div class="container-fluid">
<div class="row">
<div class="col-md-4">col-md-4</div>
<div class="col-md-8">col-md-8</div>
</div>
</div>
從上圖可以看出,依然是48分,大概意思是大的相容小的,也就是當螢幕寬度在[1200,+∞)區間內時,col-md-*依然適應;不過要注意,此時.container的寬度變寬了,變成了上文提到的1170 px(算上邊框).
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-2">col-md-6 col-md-offset-2</div>
</div>
</div>
從上圖看到,.col-md-6向右移動了2格,這個比較好理解.
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-md-6">col-md-6</div>
<div class="col-md-6">col-md-6</div>
</div>
</div>
<div class="col-md-4">col-md-6</div>
</div>
</div>
從上圖看出,左邊的8格又裝進了1個行,該行中有2個列,每列佔6格.
<div class="container">
<div class="row">
<div class="col-md-4">col-md-4 原樣</div>
<div class="col-md-3">col-md-3 原樣</div>
</div>
<div class="row">
<div class="col-md-4 col-md-push-8">col-md-4 向右推了8格</div>
<div class="col-md-3 col-md-pull-4">col-md-3 向左拉了4格</div>
</div>
</div>
那麼結論就是,col-*-push-*和col-*-pull-*比col-*-offset-*更靈活.
先看一個基本的例子.
<div class="row">
<div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3</div>
<div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3</div>
<div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3</div>
<div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3</div>
</div>
上圖中,網頁寬度是767 px,屬於超小螢幕,此時col-xs-*起作用,程式碼中有4列,每列佔6格,所以自動排成了2行,也就是後面2列被擠到了第2行;下面把螢幕寬度放寬,看看結果.
上圖中,網頁寬度是768 px,屬於小螢幕,此時col-sm-*起作用,程式碼中有4列,每列佔3格,所以不出意外的排成了1行.
但是如果將文字加多,會發生意外.
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3 測試文字測試文字測試文字測試文字測試文字測試文字</div>
<div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3</div>
<div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3</div>
<div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3</div>
</div>
</div>
在上圖中,網頁寬度是767 px,屬於超小螢幕,此時col-xs-*起作用,由於第1列中的文字比較多,導致第1列的高度比其他列要高,所以在排的時候,第3列排到了第2列下方(我們想要的是第3列排到了第1列下方),這種情況需要使用.clearfix來清除浮動,修改一下程式碼.
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3 測試文字測試文字測試文字測試文字測試文字測試文字</div>
<div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3</div>
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3</div>
<div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3</div>
</div>
</div>
在上圖中,網頁寬度是767 px,屬於超小螢幕,此時col-xs-*起作用,由於加入了<div class="clearfix visible-xs"></div>,第3列排到了第1列下方,這是我們想要的結果;.visible-xs在超小螢幕起作用.