5.5.2 响应式边距

可以结合网格断点来设置响应式的边距，在不同的断点范围显示不同的边距值。格式如下所示：

    {m|p}{t|b|l|r|x|y}-{sm|md|lg|xl}-{0|1|2|3|4|5}

在下面的示例中，设置div的边距样式为mx-auto和mr-sm-2，mx-auto设置水平居中，mr-sm-2设置右侧margin-right为0.5rem。

【例5.19】响应式文本对齐示例。

在IE 11浏览器中运行，在xs型设备上设置为mx-auto，效果如图5-20所示，在sm型设备上设置mr-sm-2，效果如图5-21所示。

图5-20 mx-auto类效果

图5-21 mr-sm-2类效果