如果你是初次接触Bootstrap，你一定会为它的栅格布局感到敬佩。事实上，这个布局系统提供了一套响应式的布局解决方案。
既然这么好用，那他是如何用CSS来实现的呢？
我特意去Bootstrap官方下载了源代码进行分析了一番，看完之后果然有了收获，不过我只看了栅格布局的那块代码，其实也很简单，不必担心不懂，你只需要要基础的CSS知识即可。
首先使用这个布局之前要定义一下代码：
这行代码如果不懂，可以搜索一下，总之大致意思就是，被定义的元素的内边距和边框不再会增加它的宽度，不加入的话排版会有问题。
不过，Bootstrap自己当然已经加入了，如果你是使用整个Bootstrap框架，那你可以无视这里，只是让你明白需要一个这个。
我是将Bootstrap框架里面的布局代码分割出来，形成一个小体积的仅有css文件的小框架（下载地址见最后），以后写单页小网站方便用。
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
这里实现了依据不同的宽度进行改变：
.container{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto;}@media(min-width:768px){/*当宽度大于768px时触发*/.container{width:750px;}}@media(min-width:992px){/*当宽度大于992px时触发*/.container{width:970px;}}@media(min-width:1200px){/*当宽度大于1200px时触发*/.container{width:1170px;}}.container-fluid{/*这个是宽度默认*/padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto;}
仔细研究一下CSS代码，相信你会突然明白。
为什么要Padding15px呢？
我觉得应该是为了如果你在容器container里面写其他东西，不至于挨边。影响美观。
是不是感觉不错：
.row{margin-right:-15px;margin-left:-15px;}
不过要注意的一点是，Bootstrap实现了更好的响应式布局，列的种类是有很多种的。
.col-xs-*针对超小屏幕手机（<768px）
.col-sm-*小屏幕平板(≥768px)
.col-md-*中等屏幕桌面显示器(≥992px)(栅格参数)
.col-lg-*针对特大的（≥1200px）
这些是什么意思？如何使用的呢？假设你写如下代码: