栅格系统的行和列

Bootstrap栅格系统是指将页面布局划分为等宽的列。随着屏幕或视口尺寸的增加，系统会自动分为1~12列。

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局。开发者可以将内容放入这些创建好的布局中，然后通过列数的定义来模块化页面布局。

与流式布局和flex布局不同的是，栅格系统通过一系列的行（row）与列（column）的组合来创建页面布局，页面的内容可以放入这些创建好的布局容器中，并且会根据父元素盒子（布局容器）尺寸的大小进行适当地调节，从而达到响应式页面布局的效果。

Bootstrap栅格系统的基本使用方式如下。

（1） Bootstrap栅格系统为不同屏幕宽度定义了不同的类，使用非常方便，直接为元素添加类名即可。

（2） 行（row）必须包含在布局容器.container类或.container-fluid类中，以便为其赋予合适的排列（alignment）和内补（padding）。

（3） 通过行（row）可以在水平方向创建一组列（column），并且只有列（column）可以作为行（row）的直接子元素。例如，可以使用3个.col-xs-4来创建3个等宽的列。

（4） 行（row）使用样式“.row”，列（column）使用样式“col--”，内容应当放置于列内，列大于12时，将会另起一行排列。

需要注意的是，Bootstrap栅格系统包含了易于使用的预定义类，还有强大的mixin用于生成更具语义的布局，读者可以查看官方文档进行学习。