苏飞论坛

标题: element ui-Layout 布局（四）分栏偏移 [打印本页]

---

作者: xyc    时间: 2021-9-1 17:01
标题: element ui-Layout 布局（四）分栏偏移
        上篇文章说到了Layout 布局的混合布局，下面说下Layout 布局的分栏偏移的实现方法。


        实现方法：通过制定 col 组件的 offset 属性可以指定分栏偏移的栏数。


        效果：
         (, 下载次数: 7)

上传

点击文件名下载附件


         HTML代码：
         

[HTML] 纯文本查看 复制代码

<el-row :gutter="20">

  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>

  <el-col :span="6" ffset="6"><div class="grid-content bg-purple"></div></el-col>

</el-row>

<el-row :gutter="20">

  <el-col :span="6" ffset="6"><div class="grid-content bg-purple"></div></el-col>

  <el-col :span="6" ffset="6"><div class="grid-content bg-purple"></div></el-col>

</el-row>

<el-row :gutter="20">

  <el-col :span="12" ffset="6"><div class="grid-content bg-purple"></div></el-col>

</el-row>

        css样式：
        

[CSS] 纯文本查看 复制代码

.el-row {

    margin-bottom: 20px;

    &:last-child {

      margin-bottom: 0;

    }

  }

  .el-col {

    border-radius: 4px;

  }

  .bg-purple-dark {

    background: #99a9bf;

  }

  .bg-purple {

    background: #d3dce6;

  }

  .bg-purple-light {

    background: #e5e9f2;

  }

  .grid-content {

    border-radius: 4px;

    min-height: 36px;

  }

  .row-bg {

    padding: 10px 0;

    background-color: #f9fafc;

  }

---

欢迎光临 苏飞论坛 (http://www.sufeinet.com/)

Powered by Discuz! X3.4