
ElementUI 组件Layout布局 el-row和el-col 简介
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
·
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)
欢迎关注我的公众号,不定期推送优质的文章,
微信扫一扫下方二维码即可关注。
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 个月前
更多推荐








所有评论(0)