【前端】響應式媒體查詢

響應式媒體查詢

媒體查詢

　　從 CSS 版本 2 開始，就可以通過媒體類型在 CSS 中獲得媒體支持。如果您曾經使用過打印樣式表，那么您可能已經使用過媒體類型。清單 1 展示了一個示例。

清單 1. 使用媒體類型
<link rel="stylesheet" type="text/css" href="site.css" media="screen" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />

　　在清單 1 中，media 屬性定義了應該用於指定每種媒體類型的樣式表：

　　screen 適用於計算機彩色屏幕。

　　print 適用於打印預覽模式下查看的內容或者打印機打印的內容。

　　

　　作為 CSS 3 規范的一部分，可以擴展媒體類型函數，並允許在樣式表中使用更精確的顯示規則。媒體查詢 是評估 True 或 False 的一種表達。如果為True，則繼續使用樣式表。如果為False，則不能使用樣式表。這種簡單邏輯通過表達式變得更加強大，使您能夠更靈活地對特定的設計場景使用自定義的顯示規則。

 

　　媒體查詢包含一個媒體類型，后跟一個或多個檢查特定條件（如最小的屏幕寬度）的表達式。樣式表中的媒體查詢看起來如清單 2 中的示例所示。

清單 2. 媒體查詢規則
@media all and (min-width: 800px) { ... }

　　根據清單2中的標記，所有最小水平屏幕寬度為 800 像素的屏幕（屏幕和打印等）都應使用如下 CSS 規則。該規則在示例中省略號所在的地方。對於該媒體查詢：

　　@media all 是媒體類型，也就是說，將此 CSS 應用於所有媒體類型。

 　　(min-width:800px) 是包含媒體查詢的表達式，如果瀏覽器的最小寬度為 800 像素則會告訴瀏覽器只運用下列 CSS。

　

　　請注意，在清單 2 中，可以省略關鍵詞 all 和 and。在將某個媒體查詢應用於所有媒體類型時，會省略 all。后面的 and 也是可選的。

 

　　使用簡寫語法重新編寫媒體查詢，如清單 3 所示。

清單 3. 簡寫語法
@media (min-width:800px) { ... }

 

　　媒體查詢也可以包含復雜表達式。例如，如果您想要創建一個僅在最小寬度為 800 像素且最大寬度為 1200 像素時應用的樣式，則需要按照清單 4 中的規則來做。

清單 4. 復雜表達式
@media (min-width:800px) and (max-width:1200px) { ... }

 

　　在您的表達式中，您可以根據自己的喜好使用任意數量的 and 條件。如果您想要增加其他條件來檢查特定的屏幕方向，只需添加另一個 and 關鍵詞，后跟 orientation 媒體查詢，如清單 5 所示。

清單 5. and 條件
@media (min-width:800px) and (max-width:1200px) and (orientation:portrait) { ... }

　　清單 5 中的媒體查詢僅在寬度為 800 到 1200 像素且方向是縱向時才能激活。（通常，方向僅對能夠輕易轉換縱橫模式的智能手機和平板電腦上是有意義的。）如果其中一個條件為 False，則無法應用媒體查詢規則。

 

　　and 關鍵詞的反義詞是 or 關鍵詞。和 and 一樣，這些條件組合在一起會構成復雜表達式。如果其中有一個條件為 True，那么整個表達式或分離的兩個條件都會為 True，如清單 6 所示。

清單 6. or 關鍵詞
@media (min-width:800px) or (orientation:portrait) { ... }

　　如果寬度至少是 800 像素或方向是縱向的，則會應用該規則。

 

　　另一個保存在詞庫中的媒體查詢關鍵詞是 not。位於媒體查詢的開始處，not 會忽略結果。換句話說，如果該查詢本來在沒有 not 關鍵詞的情況下為 true，那么現在它將為 false。清單 7 展示一個示例。

清單 7. 使用 not
@media (not min-width:800px) { ... }

　　僅從英文意思上理解，清單 7 中代碼的表示：當最小寬度不是 800 像素時，會應用下列 CSS 規則。這些示例只是將像素作為媒體查詢中的測量單位，但是測量單位並不僅限於像素。您可以使用任何有效的 CSS 測量單位，比如厘米 (cm)、英寸 (in)、毫米 (mm) 等。

 

 有用的媒體特性

　　媒體很多特性，比如寬度、顏色和網格，您可以在媒體查詢中使用它們。對每個可能的媒體特性進行描述不在本文討論范圍內。要設計響應式網站，只需要了解一些媒體特性：方向、寬度和高度。作為一個簡單媒體特性，方向的值可以是 portrait 或 landscape。這些值適用於持有手機或平板電腦的用戶，使您可以根據兩個形狀因素來優化內容。當高度大於長度時，則認為屏幕是縱向模式，當寬度大於高度時，則認為屏幕是橫向模式。

 

　　清單 8 顯示了一個使用 orientation 媒體模式查詢的示例。

清單 8. orientation 媒體查詢
@media (orientation:portrait) { ... }

 

　　高度和寬度行為十分相似，都支持以 min- 和 max- 為前綴。清單 9 展示了一個有效的媒體查詢。

清單 9. 高度和寬度媒體查詢
@media (min-width:800px) and (min-height:400px) { ... }

 

　　如果沒有 min- 或 max- 前綴，您還可以使用 width 和 height 媒體特性，如清單 10 所示。

清單 10. 不帶 min- 和 max- 前綴
@media (width:800px) and (height:400px) { ... }

　　當屏幕正好是 800 像素寬、400 像素高時，可以使用清單 10 中的媒體查詢。現實中，像這樣的媒體查詢可能過於具體而不太有用。檢測精確維度是大多數網站訪問者都不可能遇到的一個場景。通常情況下，響應式設計會使用范圍來執行屏幕檢測。

　　作為媒體查詢大小范圍的后續內容，下一節將討論一些常見的媒體查詢，在設計一個響應式網站時，您可能會發現它們非常有用。

 

常見媒體查詢

　　因為 Apple 首次向市場推出了用戶智能手機和平板電腦產品，所以下列大多數媒體查詢都是基於這些型號的設備。

如果目標是橫向模式智能手機，則使用： @media (min-width: 321px) { ... }
如果目標是縱向模式智能手機，則使用： @media (max-width: 320px) { ... }
如果目標是橫向模式 Apple iPad，則使用： @media (orientation: landscape) { ... }
如果目標是縱向模式 iPad，則使用： @media (orientation: portrait) { ... }

 

SASS 中的媒體查詢

　　SASS 行為中的媒體查詢與普通 CSS 中的完全相同，但有一個例外：它們可以嵌套在其他 CSS 規則中。當一個媒體查詢嵌套在另一個 CSS 規則中時，會將規則置於樣式表的頂層，如清單 11 所示。

清單 11. 嵌套的媒體查詢
#header {
  width: 400px;
  @media (min-width: 800px) {
    width: 100%;
  }
}

　　

　　清單 11 中的示例將編譯到清單 12 的代碼中。

清單 12. 編譯結果
#header {
  width: 400px;
}
@media (min-width: 800px) {
  #header {
    width: 100%;
  }
}

 

組織你的媒體查詢

　　現在，我們已經了解了如何編寫媒體查詢，是時候考慮采用以一種合乎邏輯的、有組織的方式將媒體查詢部署到您的 CSS 代碼中了。確定如何組織媒體查詢很大程度上是一種個人偏好。這一小節將探討兩種主要方法的優點和缺點。

　　第一個方法是為不同屏幕大小指定完全不同的樣式表。優點是規則可以保存在獨立樣式表中，這使得顯示邏輯能夠清楚地划分出來，更便於團隊進行維護。另一個優勢是源代碼分支之間的合並變得更為容易。但優點同時也是缺點。如果要為每個媒體查詢創建單獨的樣式表，則無法將一個元素的所有樣式表放在同一文件夾的同一位置。當改變一個 CSS 中的一個元素時，需要創建多個位置進行查看，這使得網站 CSS 的維護變得更加困難。

　　第二個方法是在現有樣式表中使用媒體查詢，該樣式表就在定義其余元素樣式表的位置的旁邊。這種方法的優勢是可以將所有元素樣式保存在同一個位置。當在團隊模式下工作時，這種做法可以創建更多源代碼合並工作，但這是所有基於團隊的軟件開發都可以管理且常見的一部分。

沒有所謂正確或錯誤方法。您只需選擇最適合您的項目和團隊的方法即可。

 

瀏覽器支持

　　到現在為止，您可能已經相信 CSS 媒體查詢是一個強大的工具，而且想知道哪些瀏覽器支持 CSS 媒體查詢。以下是這方面的好消息和壞消息。

好消息是：大多數現代瀏覽器（包括智能手機上的瀏覽器）都支持 CSS 媒體查詢。

壞消息是：最近，來自 Redmond 的 Windows® Internet Explorer® 8 瀏覽器不支持媒體查詢。

　　對於大多數專業 Web 開發人員來說，這意味着您需要提供一個解決方案，以便在 Internet Explorer 中支持媒體查詢。下列解決方案是一個名為 respond.js 的 JavaScript polyfill。

 

帶有 respond.js 的 Polyfill

　　Respond.js 是一個極小的增強 Web 瀏覽器的 JavaScript 庫，使得原本不支持 CSS 媒體查詢的瀏覽器能夠支持它們。該腳本循環遍歷頁面上的所有 CSS 引用，並使用媒體查詢分析 CSS 規則。然后，該腳本會監控瀏覽器寬度變化，添加或刪除與 CSS 中媒體查詢匹配的樣式。最終能夠在原本不支持的瀏覽器上運行媒體查詢。

　　由於這是一個基於 JavaScript 的解決方案，所以瀏覽器需要支持 JavaScript，以便運行腳本。該腳本只支持創建響應式設計所需的最小和最大width 媒體查詢。這並不是適用於所有可能 CSS 媒體查詢的一個替代。

　　Respond.js 是您可以選擇的諸多可用開源媒體查詢 polyfills之一。如果您覺得 respond.js 無法滿足您的需求，在進行一個小小的研究之后，您就會發現幾個替代方案。

 

@media媒體查詢判斷ipad和iPhone各版本

　　Media Queries這功能是非常強大的，他可以讓你定制不同的分辨率和設備，並在不改變內容的情況下，讓你制作的web頁面在不同的分辨率和設備下都能顯示正常，並且不會因此而丟失樣式。

/* 判斷ipad */  
@media only screen  
and (min-device-width : 768px)  
and (max-device-width : 1024px){  
/* style */  
}  

/* ipad橫屏 */  
@media only screen  
and (min-device-width : 768px)  
and (max-device-width : 1024px)  
and (orientation : landscape){  
 /* style */  
 }  

 /* ipad豎屏 */  
@media only screen  
and (min-device-width : 768px)  
and (max-device-width : 1024px)  
and (orientation : portrait){  
 /* style */  
}  

/* 判斷iphone5 *//* 橫屏豎屏判斷方法與ipad一樣 */  
@media only screen  
and (min-device-width : 320px)  
and (max-device-width : 568px){  
 /* style */  
}  

/* 判斷iphone4-iphone4s *//* 橫屏豎屏判斷方法與ipad一樣 */  

@media only screen  
and (min-device-width : 320px)  
and (max-device-width : 480px){  
/* style */  
 }  

/* iphone5分辨率 */  
screen Width = 320px (css像素)  
screen Height = 568px (css像素)  
screen Width = 640px (實際像素)  
screen Height = 1136px (實際像素)  
Device-pixel-ratio:2  

/* iphone4-iphone4s分辨率 */  
screen Width = 320px (css像素)  
screen Height = 480px (css像素)  
screen Width = 640px (實際像素)  
screen Height = 960px (實際像素)  
Device-pixel-ratio:2  

 

一、最大寬度Max Width   

<link rel="stylesheet" media="screen and (min-width:900px)" href="big.css" type="text/css" />   

　　表示：當屏幕大於或等於900px時，將采用big.css樣式來渲染Web頁面。 

 

二、多個Media Queries使用 

<link rel="stylesheet" media="screen and (min-width:600px) and (max-width:900px)" href="style.css" type="text/css" />   

　　表示：當屏幕在600px-900px之間時采用style.css樣式來渲染web頁面。 

 

三、設備屏幕的輸出寬度Device Width 

<link rel="stylesheet" media="screen and (max-device-width: 480px)" href="iphone.css" type="text/css" />   

　　表示：iphone.css樣式適用於最大設備寬度為480px，比如說iPhone上的顯示，這里的max-device-width所指的是設備的實際分辨率，也就是指可視面積分辨率 

 

四、not關鍵字 

<link rel="stylesheet" media="not print and (max-width: 1200px)" href="print.css" type="text/css" />   

　　表示：not關鍵字是用來排除某種制定的媒體類型，換句話來說就是用於排除符合表達式的設備。

 
五、only關鍵字

<link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" type="text/css" />   
<link rel="stylesheet" media="(min-width: 701px) and (max-width: 900px)" href="medium.css" type="text/css" />   

 

六、其他

<link rel="stylesheet" type="text/css" href="style.css" media="handheld and (max-width:480px), screen and (min-width:960px)" />   

　　表示：另外還有使用逗號（，）被用來表示並列或者表示或，style.css樣式被用在寬度小於或等於480px的手持設備上，或者被用於屏幕寬度大於或等於960px的設備上。 

 

---

 

媒體查詢判斷ipad和iPhone各版本

判斷ipad 

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px){
/* style */
}

　　

ipad橫屏 

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape){
/* style */
}

　　

ipad豎屏 

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait){
/* style */
}

　　

 判斷iphone5 *//* 橫屏豎屏判斷方法與ipad一樣

@media only screen

 and (min-device-width : 320px)

 and (max-device-width : 568px){

/* style */

 }

　　

 判斷iphone4-iphone4s *//* 橫屏豎屏判斷方法與ipad一樣 

@media only screen

and (min-device-width : 320px)

and (max-device-width : 480px){

/* style */

 }

　　

iphone5分辨率 

screen Width = 320px (css像素)

screen Height = 568px (css像素)

screen Width = 640px (實際像素)

screen Height = 1136px (實際像素)

Device-pixel-ratio:2

　　

 iphone4-iphone4s分辨率 

screen Width = 320px (css像素)

screen Height = 480px (css像素)

screen Width = 640px (實際像素)

screen Height = 960px (實際像素)

Device-pixel-ratio:2

　　

---

Bootstrap CSS3媒體查詢斷點

　　Bootstrap響應式設計，就是一個典型的媒體查詢CSS框架，它設定了某些媒體查詢節點，根據不同設備寬度，寫不同的斷點位置來做響應式查詢。

Bootstrap推薦的媒體查詢樣式如下：

/*==================================================
=            Bootstrap 3 Media Queries             =
==================================================*/ 
/*==========  Mobile First Method  ==========*/
/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px) {  
}
 
/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) { 
}
 
/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
}
 
/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
}
 
/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
}
 
/*==========  Non-Mobile First Method  ==========*/
/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {
}
 
/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
}
 
/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
}
 
/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px) {
}
 
/* Custom, iPhone Retina */ 
@media only screen and (max-width : 320px) {  
}

　　

　　Bootstrap 提供了一套響應式、移動設備優先的流式柵格系統，隨着屏幕或視口（viewport）尺寸的增加，系統會自動分為最多12列。它包含了易於使用的預定義類，還有強大的mixin 用於生成更具語義的布局。下面是Bootstrap媒體查詢的一些文檔，希望對你有所幫助。

 

簡介

　　柵格系統用於通過一系列的行（row）與列（column）的組合來創建頁面布局，你的內容就可以放入這些創建好的布局中。下面就介紹一下 Bootstrap 柵格系統的工作原理：

• “行（row）”必須包含在 .container （固定寬度）或 .container-fluid （100% 寬度）中，以便為其賦予合適的排列（aligment）和內補（padding）。
• 通過“行（row）”在水平方向創建一組“列（column）”。
• 你的內容應當放置於“列（column）”內，並且，只有“列（column）”可以作為行（row）”的直接子元素。
• 類似 .row 和 .col-xs-4 這種預定義的類，可以用來快速創建柵格布局。Bootstrap 源碼中定義的 mixin 也可以用來創建語義化的布局。
• 通過為“列（column）”設置 padding 屬性，從而創建列與列之間的間隔（gutter）。通過為 .row 元素設置負值margin 從而抵消掉為 .container 元素設置的 padding，也就間接為“行（row）”所包含的“列（column）”抵消掉了padding。
• 負值的 margin就是下面的示例為什么是向外突出的原因。在柵格列中的內容排成一行。
• 柵格系統中的列是通過指定1到12的值來表示其跨越的范圍。例如，三個等寬的列可以使用三個 .col-xs-4 來創建。
• 如果一“行（row）”中包含了的“列（column）”大於 12，多余的“列（column）”所在的元素將被作為一個整體另起一行排列。
• 柵格類適用於與屏幕寬度大於或等於分界點大小的設備 ， 並且針對小屏幕設備覆蓋柵格類。 因此，在元素上應用任何 .col-md-* 柵格類適用於與屏幕寬度大於或等於分界點大小的設備 ， 並且針對小屏幕設備覆蓋柵格類。 因此，在元素上應用任何 .col-lg-* 不存在， 也影響大屏幕設備。

 

媒體查詢

　　在柵格系統中，我們在 Less 文件中使用以下媒體查詢（media query）來創建關鍵的分界點閾值。

/* 超小屏幕（手機，小於 768px） */
/* 沒有任何媒體查詢相關的代碼，因為這在 Bootstrap 中是默認的（還記得 Bootstrap 是移動設備優先的嗎？） */
 
/* 小屏幕（平板，大於等於 768px） */
@media (min-width: @screen-sm-min) { ... }
 
/* 中等屏幕（桌面顯示器，大於等於 992px） */
@media (min-width: @screen-md-min) { ... }
 
/* 大屏幕（大桌面顯示器，大於等於 1200px） */
@media (min-width: @screen-lg-min) { ... }

　　

　　我們偶爾也會在媒體查詢代碼中包含 max-width 從而將 CSS 的影響限制在更小范圍的屏幕大小之內。

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

　　

柵格參數

	超小屏幕 手機 (<768px)	小屏幕 平板 (≥768px)	中等屏幕 桌面顯示器 (≥992px)	大屏幕 大桌面顯示器 (≥1200px)
柵格系統行為	總是水平排列	開始是堆疊在一起的，當大於這些閾值時將變為水平排列C
.container 最大寬度	None （自動）	750px	970px	1170px
類前綴	.col-xs-	.col-sm-	.col-md-	.col-lg-
列（column）數	12
最大列（column）寬	自動	~62px	~81px	~97px
槽（gutter）寬	30px （每列左右均有 15px）
可嵌套	是
偏移（Offsets）	是
列排序	是

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

通過下表可以詳細查看 Bootstrap 的柵格系統是如何在多種屏幕設備上工作的。

 

實例：從堆疊到水平排列

　　使用單一的一組 .col-md-* 柵格類，就可以創建一個基本的柵格系統，在手機和平板設備上一開始是堆疊在一起的（超小屏幕到小屏幕這一范圍），在桌面（中等）屏幕設備上變為水平排列。所有“列（column）必須放在 ” .row 內。

<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

　　

實例：流式布局容器

　　將最外面的布局元素 .container 修改為 .container-fluid，就可以將固定寬度的柵格布局轉換為 100% 寬度的布局。

<div class="container-fluid">
  <div class="row">
    ...
  </div>
</div>

　　

實例：移動設備和桌面屏幕

　　是否不希望在小屏幕設備上所有列都堆疊在一起？那就使用針對超小屏幕和中等屏幕設備所定義的類吧，即 .col-xs-*和 .col-md-*。請看下面的實例，研究一下這些是如何工作的。

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
 
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

　　

實例：手機、平板、桌面

　　在上面案例的基礎上，通過使用針對平板設備的 .col-sm-* 類，我們來創建更加動態和強大的布局吧。

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <!-- Optional: clear the XS cols if their content doesn't match in height -->
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

　　

實例：多余的列（column）將另起一行排列

　　如果在一個 .row 內包含的列（column）大於12個，包含多余列（column）的元素將作為一個整體單元被另起一行排列。

<div class="row">
  <div class="col-xs-9">.col-xs-9</div>
  <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
</div>

　　

響應式列重置

　　即便有上面給出的四組柵格class，你也不免會碰到一些問題，例如，在某些閾值時，某些列可能會出現比別的列高的情況。為了克服這一問題，建議聯合使用 .clearfix 和 響應式工具類。

<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>
 
  <!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix visible-xs-block"></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 class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>
<div class="row">
  <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
  <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
</div>

　　

列偏移

　　使用 .col-md-offset-* 類可以將列向右側偏移。這些類實際是通過使用 * 選擇器為當前元素增加了左側的邊距（margin）。例如，.col-md-offset-4 類將 .col-md-4 元素向右側偏移了4個列（column）的寬度。

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>

　　

嵌套列

　　為了使用內置的柵格系統將內容再次嵌套，可以通過添加一個新的 .row 元素和一系列 .col-sm-* 元素到已經存在的.col-sm-* 元素內。被嵌套的行（row）所包含的列（column）的個數不能超過12（其實，沒有要求你必須占滿12列）。

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

　　

列排序

<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

　　

Less mixin 和變量

　　除了用於快速布局的預定義柵格類，Bootstrap 還包含了一組 Less 變量和 mixin 用於幫你生成簡單、語義化的布局。

 

變量

　　通過變量來定義列數、槽（gutter）寬、媒體查詢閾值（用於確定合適讓列浮動）。我們使用這些變量生成預定義的柵格類，如上所示，還有如下所示的定制 mixin。

@grid-columns:              12;
@grid-gutter-width:         30px;
@grid-float-breakpoint:     768px;

 

mixin

　　mixin 用來和柵格變量一同使用，為每個列（column）生成語義化的 CSS 代碼。

// Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {
  // Then clear the floated columns
  .clearfix();
 
  @media (min-width: @screen-sm-min) {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }
 
  // Negative margin nested rows out to align the content of columns
  .row {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }
}
 
// Generate the extra small columns
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);
 
  // Calculate width based on number of columns available
  @media (min-width: @grid-float-breakpoint) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}
 
// Generate the small columns
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);
 
  // Calculate width based on number of columns available
  @media (min-width: @screen-sm-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}
 
// Generate the small column offsets
.make-sm-column-offset(@columns) {
  @media (min-width: @screen-sm-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-push(@columns) {
  @media (min-width: @screen-sm-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-pull(@columns) {
  @media (min-width: @screen-sm-min) {
    right: percentage((@columns / @grid-columns));
  }
}
 
// Generate the medium columns
.make-md-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);
 
  // Calculate width based on number of columns available
  @media (min-width: @screen-md-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}
 
// Generate the medium column offsets
.make-md-column-offset(@columns) {
  @media (min-width: @screen-md-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-push(@columns) {
  @media (min-width: @screen-md-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-pull(@columns) {
  @media (min-width: @screen-md-min) {
    right: percentage((@columns / @grid-columns));
  }
}
 
// Generate the large columns
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);
 
  // Calculate width based on number of columns available
  @media (min-width: @screen-lg-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}
 
// Generate the large column offsets
.make-lg-column-offset(@columns) {
  @media (min-width: @screen-lg-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-push(@columns) {
  @media (min-width: @screen-lg-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-pull(@columns) {
  @media (min-width: @screen-lg-min) {
    right: percentage((@columns / @grid-columns));
  }
}

 　

實例展示

　　你可以重新修改這些變量的值，或者用默認值調用這些 mixin。下面就是一個利用默認設置生成兩列布局（列之間有間隔）的案例。

.wrapper {
  .make-row();
}
.content-main {
  .make-lg-column(8);
}
.content-secondary {
  .make-lg-column(3);
  .make-lg-column-offset(1);
}
<div class="wrapper">
  <div class="content-main">...</div>
  <div class="content-secondary">...</div>
</div>