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

里面主要有這么幾種查詢：
第一種：小于768的時(shí)候，是沒有使用media查詢的樣式。使用在較小的設(shè)備上，如舊式手機(jī)，樣式開頭為.col-xs-，一般bootstrap在移動(dòng)設(shè)備上都會(huì)使用100%，除非有特殊情況，才會(huì)應(yīng)用這個(gè).col-xs標(biāo)簽?！?/p>

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

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

第四種：大于1200的，通常在大型設(shè)備臺(tái)式機(jī)和手提電腦，樣式開頭為.col-lg-，在這里，container會(huì)給他設(shè)置一個(gè)最大寬度為1170.

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

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

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

第二：通過不同寬度的標(biāo)簽來改變?cè)诓煌瑢挾认碌臋谀繉挾茸兓?，比如?200的時(shí)候，可以使用col-lg-8與col-lg-4，那么在970的時(shí)候可以使用col-md-6與col-md-6了。這時(shí)候兩種不同屏幕的顯示時(shí)不同的。

需要注意的是：

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

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

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

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

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