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

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

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

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

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

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

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

新建html文件：如图内容所示

排成一列，然后分成三栏再结合一下上面栅格系统的6部原理。是不是懂一点了反正我自己懂了很多。通过同样的方式可以创建出比较复杂的网格布局页面只需要在布局使用的容器上面添加相应的网格布局的类。比如说如果内容占用6个网格那么就添加一个col-xs-6的类、占用四个网格就添加一个col-xs-4的类，然后在同一排的周围进行使用带有row类的容器

1、container:用.container包裹页面上的内容即可实现居中对齐在不同的媒体查询或值范围内都为container设置了max-width，用以匹配栅格系统

2、col-xs-4:这个类通过"-"分为三个部分，第三个部分的数字作为一个泛指它的范围是1到12。就是可以把一个区域分为12个栏这个要和row類联合使用。

其实这个布局很像HTMl中的Table布局tr行和td列