3.2.2 自动布局列

利用特定于断点的列类（例如col-sm-6类），可以轻松地进行列大小调整，而无须使用明确样式。

1．等宽列

下面的例子，展示了一行两列、一行三列、一行四列和一行十二列的布局，从xs（如表3-1所示，实际上并不存在xs这个空间命名，其实是以.col表示）到xl（即.col-xl-*）所有设备上都是等宽并占满一行，只要简单的应用.col就可以完成。

【例3.1】等宽列示例。

在IE 11浏览器中运行结果如图3-2所示。

2．设置一个列宽

可以在一行多列的情况下，特别指定一列并进行宽度定义，同时其他列自动调整大小，可以使用预定义的网格类，从而实行网格宽或行宽的优化处理。注意在这种情况下，无论中心列的宽度如何，其他列都将调整大小。

在下面代码中，为第一行中的第2列设置了col-7类，为第2行的第1列设置col-3类。

【例3.2】设置一个列宽示例。

在IE 11浏览器中运行结果如图3-3所示。

3．可变宽度内容

使用col-{breakpoint}-auto断点方法，可以实现根据其内容的自然宽度来对列进行大小调整。

【例3.3】可变宽度内容示例。

在IE 11浏览器中运行，当屏幕小于768px时效果如图3-4所示。

在屏幕大于等于768px且小于992px时显示的效果如图3-5所示。

在屏幕大于等于992px时显示的效果如图3-6所示。

4．等宽多列

创建跨多个行的等宽列，方法是插入w-100通用样式类，将列拆分为新行。

【例3.4】等宽多列示例。

在IE 11浏览器中运行效果如图3-7所示。