Bootstrap 边距
Bootstrap 具有广泛的响应边距和填充实用程序类。
它们适用于所有断点:xs(<= 576px),sm(>=576px),md(>=768px),lg(>=992px) 或 xl(>=1200px)。
这些类以以下格式使用:xs 的 {property} {sides--size} 和 sm,md,lg 和 xl 的 {property} {sides- {breakpoint}-{size}。
其中属性是:
其中边距是以下:
- t-设置margin-top或padding-top
- b-设置margin-bottom或padding-bottom
- l-设置margin-left或padding-left
- r-设置margin-right或padding-right
- x-设置padding-left和padding-right或margin-left和margin-right
- y-设置padding-top和padding-bottom或margin-top和margin-bottom
- blank-在元素的所有4个面上设置margin和padding
其中大小是以下:
- 0-将边距或填充设置为0
- 1-将空白或填充设置为.25rem(如果font-size为16px,则为4px)
- 2-将空白或填充设置为.5rem(如果font-size为16px,则为8px)
- 3-将边距或填充设置为1rem(如果font-size为16px,则为16px)
- 4-将边距或填充设置为1.5rem(如果font-size为16px,则为24px)
- 5-将边距或填充设置为3rem(如果font-size为16px,则为48px)
- auto-将边距或填充设置为自动
注意:边距也可以为负数,方法是在尺寸前面添加 "n":
- n1-将页边距设置为-.25rem(如果font-size为16px,则为-4px)
- n2-将页边距设置为-.5rem(如果font-size为16px,则为-8px)
- n3-将页边距设置为-1rem(如果font-size为16px,则为-16px)
- n4-将边距设置为-1.5rem(如果font-size为16px,则为-24px)
- n5-将边距设置为-3rem(如果font-size为16px,则为-48px)
输出结果如下:
我只有一个顶部填充(1.5rem = 24px)
我到处都有填充(3rem = 48px)
我到处都有边距(3rem = 48px)和底部填充(3rem = 48px)