Bootstrap3的柵格化樣式就是通過基礎的樣式加media查詢相結合，所以不要把自適應搞得很神秘，其實就是很簡單。下面與你一起分析一下具體源碼：

里面主要有這么幾種查詢：
第一種：小于768的時候，是沒有使用media查詢的樣式。使用在較小的設備上，如舊式手機，樣式開頭為.col-xs-，一般bootstrap在移動設備上都會使用100%，除非有特殊情況，才會應用這個.col-xs標簽。·

第二種：大于等于768并小于992的時候，使用在小設備平板中，樣式開頭為.col-sm-，在這里，container會給他設置一個最大的寬度為750，也就是說在這個范圍里面的網(wǎng)頁最大寬度為750，bootstrap不是隨著寬度變寬而變寬的，他在某個范圍的時候，會給樣式設定一個最大值的。那么這樣范圍里面的時候，外形是沒有變化的。

第三種：大于等于992并小于1200的時候，使用在中等設備桌面中，樣式開頭為.col-md-，在這里，container會給他設置一個最大寬度為970.現(xiàn)在的瀏覽器屏幕很多都大于1200了。

第四種：大于1200的，通常在大型設備臺式機和手提電腦，樣式開頭為.col-lg-，在這里，container會給他設置一個最大寬度為1170.

當然，上面這四種情況的初始寬度是可以設置的，bootstrap同樣可以通過Less或者Sass來自定義每個查詢的寬度的。

所以，從上面的這幾種查詢，我們看出bootstrap的柵格化系統(tǒng)總共有這么幾種變化的。

第一：樣式有三個固定寬度和一個自適應寬度，分別是750、970 和1170固定寬，在小于768的時候則是采用屏幕寬度-30（左右15像素）的寬度。

第二：通過不同寬度的標簽來改變在不同寬度下的欄目寬度變化，比如在1200的時候，可以使用col-lg-8與col-lg-4，那么在970的時候可以使用col-md-6與col-md-6了。這時候兩種不同屏幕的顯示時不同的。

需要注意的是：

Bootstrap給所有的盒子都加了box-sizing:border-box這個樣式，所以實際寬度是減去border和padding之后所剩下的寬度。box-sizing這個是css3樣式，在can I use 上顯示IE8以下不支持這個屬性的。所以Bootstrap3在IE7和IE6是慘不忍睹的。你也可以加這個IE的降級標簽：

Bootstrap的.container{padding-left:15px; padding-right:15px;}的。然后在里面的元素.row又向外擴張15像素，即.row{margin-left:-15px; margin-right:-15px;}

然后里面的col-*又col-*{padding-left:15px; padding-right:15px;}

所以使用Bootstrap3的時候要注意row和col-*是兩對同時存在的玩意。雖然很好用，不過IE6和IE7不兼容的話，在國內還是有點頭痛的。要是只做移動端的話，那就可以無視古老的IE了。

來源：前端開發(fā)博客