苏飞论坛

标题: element ui-Layout 布局（二）分栏间隔 [打印本页]

---

作者: xyc    时间: 2021-8-31 15:47
标题: element ui-Layout 布局（二）分栏间隔
        上篇文章说到了Layout 布局的基础布局，下面说下Layout 布局的分栏间隔的实现方法。

        实现方法：Row 组件 提供 gutter 属性来指定每一栏之间的间隔，默认间隔为 0。

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

上传

点击文件名下载附件
        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;

  }                

      HTML代码：
      

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

<el-row :gutter="20">

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

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

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

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

</el-row>

---

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

Powered by Discuz! X3.4