1. 可以这样设置上下间距：

   <div class="row my-1">
   <div class="row my-2">
   <div class="row my-3">
   <div class="row my-4">
   <div class="row my-5">
   

2. 可以这样设置只有上间距：

   <div class="row mt-1">
   <div class="row mt-2">
   <div class="row mt-3">
   <div class="row mt-4">
   <div class="row mt-5">
   

3. 可以这样设置只有下间距：

   <div class="row mb-1">
   <div class="row mb-2">
   <div class="row mb-3">
   <div class="row mb-4">
   <div class="row mb-5">
   

• 总结：数字越大，间距也越大。

• Bootstrap 4.3.1 源码（从第 7955 行开始）：

.mb-1,
.my-1 {
  margin-bottom: 0.25rem !important;
}

.ml-1,
.mx-1 {
  margin-left: 0.25rem !important;
}

.m-2 {
  margin: 0.5rem !important;
}

.mt-2,
.my-2 {
  margin-top: 0.5rem !important;
}

.mr-2,
.mx-2 {
  margin-right: 0.5rem !important;
}

.mb-2,
.my-2 {
  margin-bottom: 0.5rem !important;
}

.ml-2,
.mx-2 {
  margin-left: 0.5rem !important;
}

.m-3 {
  margin: 1rem !important;
}

.mt-3,
.my-3 {
  margin-top: 1rem !important;
}

.mr-3,
.mx-3 {
  margin-right: 1rem !important;
}

.mb-3,
.my-3 {
  margin-bottom: 1rem !important;
}

.ml-3,
.mx-3 {
  margin-left: 1rem !important;
}

.m-4 {
  margin: 1.5rem !important;
}

.mt-4,
.my-4 {
  margin-top: 1.5rem !important;
}

.mr-4,
.mx-4 {
  margin-right: 1.5rem !important;
}

.mb-4,
.my-4 {
  margin-bottom: 1.5rem !important;
}

.ml-4,
.mx-4 {
  margin-left: 1.5rem !important;
}

.m-5 {
  margin: 3rem !important;
}

.mt-5,
.my-5 {
  margin-top: 3rem !important;
}

.mr-5,
.mx-5 {
  margin-right: 3rem !important;
}

.mb-5,
.my-5 {
  margin-bottom: 3rem !important;
}

.ml-5,
.mx-5 {
  margin-left: 3rem !important;
}

个人理解：

1. mb：代表 Margin Bottom（只有下间距）；
2. mt：代表 Margin Top（只有上间距）；
3. my：Margin Y 轴（上下都有间距）；

同理：

1. ml：代表 Margin Left（只有左间距）；
2. mr：代表 Margin Right（只有右间距）；
3. mx：Margin X 轴（左右间距都有的啦......）；

• 加油！祝你成功！！！