Bootstrap3 依旧是支持 IE8 的，只是同时需要加入Respond.js ，通过这个JS来让IE8支持media 查询，由于Bootstrap3已经是用了盒子的border-box模型，而IE8对于box-sizing支持还不完全，所以container的css已经去掉了max-width这个属性。只在media才会出现max-width。

bootstrap3 的栅格化样式好像是抄 fundation 的，2.3的时候因为没有加入移动方面的考虑，后来随着移动的热化，才开始加入。

Bootstrap3 的栅格化样式就是通过基础的样式加 media 查询相结合，所以不要把自适应搞得很神秘，其实就是很简单。下面与你一起分析一下具体源码：

里面主要有这么几种查询：

第一种：小于768的时候，是没有使用media查询的样式。使用在较小的设备上，如旧式手机，样式开头为.col-xs-，一般bootstrap在移动设备上都会使用100%，除非有特殊情况，才会应用这个.col-xs标签。

第二种：大于等于768并小于992的时候，使用在小设备平板中，样式开头为.col-sm-，在这里，container会给他设置一个最大的宽度为750，也就是说在这个范围里面的网页最大宽度为750，bootstrap不是随着宽度变宽而变宽的，他在某个范围的时候，会给样式设定一个最大值的。那么这样范围里面的时候，外形是没有变化的。

第三种：大于等于992并小于1200的时候，使用在中等设备桌面中，样式开头为.col-md-，在这里，container会给他设置一个最大宽度为970.现在的浏览器屏幕很多都大于1200了。

第四种：大于1200的，通常在大型设备台式机和手提电脑，样式开头为.col-lg-，在这里，container会给他设置一个最大宽度为1170.

当然，上面这四种情况的初始宽度是可以设置的，bootstrap同样可以通过Less或者Sass来自定义每个查询的宽度的。

所以，从上面的这几种查询，我们看出bootstrap的栅格化系统总共有这么几种变化的。

第一：样式有三个固定宽度和一个自适应宽度，分别是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的降级标签：

<meta http-equiv="X-UA-Compatible" content="IE=edge">

鉴于 Bootstrap 的文档已经非常完善了。你可以看看这个演示：http://getbootstrap.com/examples/grid/

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了。