Element-ui 5列布局

element-ui 并没有实现5列布局,其实自己实现也超级容易

24/5=4.8,每列点4.8格,所以干脆用 el-col-sm-4-8,el-col-md-4-8,el-col-lg-4-8,el-col-xl-4-8 命名,直接如下代码添加5列样式,

直接如下图使用


效果如下


@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%

    }

}

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 各种纯css图标 CSS3可以实现很多漂亮的图形,我收集了32种图形,在下面列出。直接用CSS3画出这些图形,要比...
    剑残阅读 9,700评论 0 8
  • 我今年二十五岁,不想再爱上谁,只想着发财,现在努力工作赚钱,愿日后给自己一个安稳居所,不再颠沛流离,不再小心翼翼。
    柠C小姐阅读 167评论 0 0
  • 有没有一首歌,说出心中所想。蓦然的没有一丝防备击溃心房。 在mono小组的歌词集结部中翻看着来自四面八方的人分享的...
    爱吃草莓味的真知棒阅读 166评论 0 1
  • 姓名 汪海。公司 上海日朗门窗有限公司 【日精进打卡第56天】 【知~学习】 《六项精进》背诵遍 《大学》背诵0遍...
    汪海_51e2阅读 148评论 0 0
  • 看到Sunny同学如此研究“情态动词”,Tyger知道应该帮助Sunny们提升认知了。 首先明确一点,情态动词是动...
    Tyger老师阅读 3,180评论 1 9