影响元素之间的间距是可以通过style的margin或padding属性来实现，但这两个属性本意并不相同；margin影响的是本元素与相邻外界元素之间的距离，这里简称外边距；padding影响的元素本身与其内部子元素之间的距离，简称为内填充。
bootstrap4提供了简写的class名，名称分别以m-开头和p-开头的类。
一、影响距离大小的值有
0,1,2,3,4,5,auto
(1)、margin值有
| class名 | 等价的style |
|---|---|
| m-0 | 等价于{margin:0 !important} |
| m-1 | 等价于{margin:0.25rem !important} |
| m-2 | 等价于{margin:0.5rem !important} |
| m-3 | 等价于{margin:1rem !important} |
| m-4 | 等价于{margin:1.5rem !important} |
| m-5 | 等价于{margin:3rem !important} |
| m-auto | 等价于{margin:auto !important} |
(2)、padding值有
| class名 | 等价的style |
|---|---|
| p-0 | 等价于{padding:0 !important} |
| p-1 | 等价于{padding:0.25rem !important} |
| p-2 | 等价于{padding:0.5rem !important} |
| p-3 | 等价于{padding:1rem !important} |
| p-4 | 等价于{padding:1.5rem !important} |
| p-5 | 等价于{padding:3rem !important} |
| p-auto | 等价于{padding:auto !important} |
二、调整某一侧的边距
有几个缩写,t,b,l,r,x,y含义分别是top,bottom,left,right,left和right,top和bottom
（1）margin例子，距离大小可以0-5与auto,这里只用期中一个值来说明含义
| class名 | 等价的style |
|---|---|
| mt-2 | {margin-top: 0.5rem !important} |
| mb-2 | {margin-bottom: 0.5rem !important} |
| ml-2 | {margin-left: 0.5rem !important} |
| mr-2 | {margin-right: 0.5rem !important} |
| mx-2 | {margin-right: 0.5rem !important;margin-left: 0.5rem !important} |
| my-2 | {margin-top: 0.5rem !important;margin-bottom: 0.5rem !important} |
(2)padding例子
| class名 | 等价的style |
|---|---|
| pt-2 | {padding-top: 0.5rem !important} |
| pb-2 | {padding-bottom: 0.5rem !important} |
| pl-2 | {padding-left: 0.5rem !important} |
| pr-2 | {padding-right: 0.5rem !important} |
| px-2 | {padding-right: 0.5rem !important;margin-left: 0.5rem !important} |
| py-2 | {padding-top: 0.5rem !important;margin-bottom: 0.5rem !important} |
Bootstrap4与Bootstrap3的区别
- Bootsrap3采用的float布局，而Bootstrap采用的flex布局
- Bootstrap4中的栅格系统可以不用添加指定的列数 如row 里面有2个col 会任何尺寸下均分row
- Bootstrap3只有4种栅格类 分别为（col-xs特小，col-sm小,col-md,中col-lg大）
- Bootstrap4有5种栅格类，（col-特小，col-sm-小，col-md-中，col-lg-大，col-xl-超大）
- Bootstrap4使用rem为单位
- Bootstrap4设置列偏移时通过 offset-sm-4,而Bootstrap3通过col-sm-offset-4
- Bootstrap4增加了响应式容器如 container-sm ,container-md….,当小于屏幕尺寸小于栅格类时会占满整个屏幕
注意点：
Bootstrap4中不能使用Bootstrap3中的hidden-xs,visible-xs类
在Bootstrap4中如果你想实现在某个尺寸下隐藏，你应该参照下表
| Bootstrap3 | Bootstrap4 |
|---|---|
| hidden-xs | d-sm-block |
| hidden-sm | d-sm-none d-md-block |
| hidden-md | d-md-none d-lg-block |
| hidden-lg | d-lg-none d-xl-block |
| hidden-xl | d-xl-none |
| visible-xs | d-sm-none |
| visible-sm | d-sm-block d-md-none |
| visible-md | d-md-block d-lg-none |
| visible-lg | d-lg-block d-xl-none |
| visible-xl | d-xl-block |
值得一提的是B3中使用hidden-sm只会在sm尺寸下隐藏，而其他尺寸会正常显示，在B4中如果你单纯的指定d-sm-none 则该元素会在sm尺寸隐藏，但sm以上的尺寸也会隐藏，在sm之下的尺寸正常显示，这里就涉及到向上兼容的问题，所以你在设置sm元素隐藏时还得设置md尺寸显示，如上表，其他以此类推
隐藏向上兼容，显示向下兼容
原文链接：https://blog.csdn.net/weixin_45143481/article/details/104679784
原文链接：https://blog.csdn.net/weixin_39987434/article/details/97111457