Element UI 响应式布局实现一行5列布局

el-row el-col 实现一行5列

1、自定义类名

 <el-col :lg="{span:'4-8'}" :md="8" :sm="12" :xs="24">
 ....
 </el-col>

2、书写不同屏幕大小下，类的样式

  @media only screen and (min-width: 768px) {
    .el-col-sm-4-8 {
      width: 20%;
    }
    .el-col-sm-offset-4-8 {
      margin-left: 20%;
    }
    .el-col-sm-pull-4-8 {
      position: relative;
      right: 20%;
    }
    .el-col-sm-push-4-8 {
      position: relative;
      left: 20%;
    }
  }

  @media only screen and (min-width: 992px) {
    .el-col-md-4-8 {
      width: 20%;
    }
    .el-col-md-offset-4-8 {
      margin-left: 20%;
    }
    .el-col-md-pull-4-8 {
      position: relative;
      right: 20%;
    }
    .el-col-md-push-4-8 {
      position: relative;
      left: 20%;
    }
  }

  @media only screen and (min-width: 1200px) {
    .el-col-lg-4-8 {
      width: 20%;
    }
    .el-col-lg-offset-4-8 {
      margin-left: 20%;
    }
    .el-col-lg-pull-4-8 {
      position: relative;
      right: 20%;
    }
    .el-col-lg-push-4-8 {
      position: relative;
      left: 20%;
    }
  }

  @media only screen and (min-width: 1920px) {
    .el-col-xl-4-8 {
      width: 20%;
    }
    .el-col-xl-offset-4-8 {
      margin-left: 20%;
    }
    .el-col-xl-pull-4-8 {
      position: relative;
      right: 20%;
    }
    .el-col-xl-push-4-8 {
      position: relative;
      left: 20%;
    }
  }