配合element-plus响应式布局，动态调整页面元素的底边距

效果图

需求描述：在页面进行响应式缩放时，控制页面元素的底部边距，最下边的元素底边距为0，

关键代码：

// 调整底部间距
@media only screen and (max-width: 768px) {
  .el-col-xs-24 {
    &.mb4 {
      &:last-of-type {
        margin-bottom: 0;
      }
    }
  }
}
@media only screen and (min-width: 768px) {
  .el-col-sm-12 {
    &.mb4 {
      &:nth-last-of-type(1) {
        margin-bottom: 0;
      }
      &:nth-last-of-type(2) {
        margin-bottom: 0;
      }
    }
  }
}
@media only screen and (min-width: 992px) {
  .el-col-md-4,.el-col-md-8 {
    &.mb4 {
      margin-bottom: 0;
    }
  }
}

完整代码

<template>
  <div class="wrap">
    <!-- 响应式布局 -->
    <el-row :gutter="10" style="background-color: greenyellow;">
      <el-col :xs="24" :sm="12" :md="4" :lg="6" :xl="1" class="mb4">
        <div style="background-color: #f00">一行</div>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="11" class="mb4">
        <div style="background-color: #f00">二行</div>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="11" class="mb4">
        <div style="background-color: #f00">三行</div>
      </el-col>
      <el-col :xs="24" :sm="12" :md="4" :lg="6" :xl="1" class="mb4">
        <div style="background-color: #f00">三行</div>
      </el-col>
    </el-row>
  </div>
</template>

<style lang="scss" scoped>
.wrap {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.1);
  .mb4 {
    margin-bottom: 10px;
    
  }
}
// 调整底部间距
@media only screen and (max-width: 768px) {
  .el-col-xs-24 {
    &.mb4 {
      &:last-of-type {
        margin-bottom: 0;
      }
    }
  }
}
@media only screen and (min-width: 768px) {
  .el-col-sm-12 {
    &.mb4 {
      &:nth-last-of-type(1) {
        margin-bottom: 0;
      }
      &:nth-last-of-type(2) {
        margin-bottom: 0;
      }
    }
  }
}
@media only screen and (min-width: 992px) {
  .el-col-md-4,.el-col-md-8 {
    &.mb4 {
      margin-bottom: 0;
    }
  }
}
</style>