3.2.3 响应类

Bootstrap 4的网格系统包括五种宽度预定义，用于构建复杂的响应布局，可以根据需要定义在特小.col、小.col-sm-*、中.col-md-*、大.col-lg-*、特大.col-xl-*五种屏幕（设备）下的样式。

1．覆盖所有设备

如果要一次性定义从最小设备到最大设备相同的网格系统布局表现，使用.col和.col-*类。后者是用于指定特定大小的（例如.col-6），否则使用.col就可以了。

【例3.5】覆盖所有设备示例。

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

2．水平排列

使用单一的.col-sm-*类方法，可以创建一个基本的网格系统，此时如果没有指定其他媒体查询断点宽度，这个网格系统是成立的，而且会随着屏幕变窄成为超小屏幕.col后，自动成为每列一行、水平堆砌。改变网页屏幕宽度可以在下面的例子中看到效果。

【例3.6】水平排列示例。

在IE 11浏览器中运行，在sm（≥576px）型设备上显示效果如图3-9所示，在md（≥768px）型设备上显示效果如图3-10所示。

3．混合搭配

可以根据需要对每一个列都进行不同的设备定义。

【例3.7】混合搭配。

在IE 11浏览器中运行，在小于md型的设备上显示为一个全宽列和一个半宽列，效果如图3-11所示；在大于等于md型设备上显示为一列，分别占8份和4份，效果如图3-12所示。

4．删除边距

Bootstrap默认的网格和列间有边距，一般是左右-15px的margin或padding处理，可以使用.no-gutters类来消除它，这将影响到.row行、列平行间隙及所有子列。

【例3.8】删除边距示例。

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

5．列包装

如果在一行中放置超过12列，则每组额外列将作为一个单元包裹到新行上。

【例3.9】列包装示例。

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