bootstrap的布局规范（container、row、col）

Bootstrap内置了一套响应式、移动设备优先的12列格网布局系统，它会随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。

Bootstrap有自己的固定的规范，使用时要按规范来，否则可能出现布局错乱，或者一起奇怪的问题（例如：导航条只有在页面拖动时才显示）。

通过一系列的行（row）与列（column）的组合创建页面布局，然后你的内容就可以放入到你创建好的布局当中。

下面就简单介绍一下Bootstrap栅格系统的工作原理：

行（row）必须包含在.container中，以便为其赋予合适的排列（aligment）和内补（padding）。

使用行（row）在水平方向创建一组列（column）。

你的内容应当放置于列（column）内，而且，只有列（column）可以作为行（row）的直接子元素。

类似Predefined grid classes like .row and .col-xs-4 这些预定义的栅格class可以用来快速创建栅格布局。Bootstrap源码中定义的mixin也可以用来创建语义化的布局。

container有个15px的padding，而我们设定的每个col也都有15px的padding，如果两者直接配合，那么就会产生30px的间距，导致内容和浏览器边框的距离较大，所以用row将所有的col包裹，row会有一个-15px的margin，可以抵消掉一个container或col产生的15px的padding值。

通过设置padding从而创建列（column）之间的间隔（gutter）。然后通过为第一和最后一样设置负值的margin从而抵消掉padding的影响。

栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个.col-xs-4来创建。

参考：

Bootstrap 响应式布局_bootstraprow布局_欢乐多~的博客-CSDN博客

bootstrap栅格系统的container和row一些关系_风神修罗使的博客-CSDN博客

bootstrap的布局（container、row、col-xs-4）