- Bootstrap从入门到项目实战
- 李爱玲
- 160字
- 2021-03-24 20:37:00
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类效果