Bootstrap-栅格系统自适应布局

1 container

顾名思义container是栅格系统最外层的class，直接被container包裹的只能是row这个class。需要注意的是container自带左右各15px padding值，这样container与浏览器窗口之间就存在一定距离。

2 row

row指container的一行，每行理想状态包含12个col，这些col在不同屏幕大小时行为不同，见下图：

你也可以给一个div设置两个col-  class，以便适应不同的屏幕。值得一提的是，row的左右各有-15px margin值，被当作为row的 div 被约束在 container内边界与粉色区域重叠，但没超过。这负的15px margin 值把 row的推出了 container 的 15px padding，并与之重叠，本质上讲就是负出去。

切记永远不要在container外用row，这样做是无效的。

3 col-

col在不同屏幕下行为不同，这在上面已经说过了。

列(col)现在有15px的padding了，如下图中黄颜色部分。Container的正padding值造成了15px的留空，row用负margin值反的延伸回去，所以现在col的padding值与container的padding重叠，永远不要在row外使用col,在row外使用col是无效的。

4 嵌套

当你设置了container,row,column后，你可以在column内再创建新的栅格系统。你在列(col)内添加新的行(row)时不需再嵌container了。这个技巧在于列(col)扮演了container一样的角色，列也有15px的padding值，它一样允许行(row)的负margin值,它内部的列、内容间的补白等都一样能很好的工作了。