Layout布局

el-row属性简介

el-row 组件 提供 gutter 属性来指定每一栏之间的间隔,默认间隔为 0。
提醒: el-row :gutter需要与el-col :span 一起使用才能生效
在这里插入图片描述

el-col属性简介

el-col的span属性 默认值为24,表示每一行共24份,:spn的值即为每一列占据整行的比例
在这里插入图片描述

示例效果图

在这里插入图片描述

示例代码

    <el-row :gutter="10"><!-- 表示一行内的单个小列之间的间距为10px。相当于设置外边距 margin -->
      <el-col :span="8">
        <!--  el-col的span属性 默认值为24,   8/24 即此div显示宽度为1/3 -->
        <div class="grid-content bg-purple-dark"></div>
      </el-col>
      <el-col  :span="16">
        <!--      16/24 即此div显示宽度为2/3 -->
        <div class="grid-content bg-purple-dark"></div>
      </el-col>
    </el-row>
    

使用详情请参考:ElementUI 组件:Layout布局(el-row、el-col)

欢迎关注我的公众号,不定期推送优质的文章,
微信扫一扫下方二维码即可关注。
在这里插入图片描述

GitHub 加速计划 / eleme / element
10
1
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:5 个月前 )
c345bb45 9 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 9 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐