el-element布局控件layout中的el-row和el-col

el-element布局控件layout中的el-row和el-col 2022-05-25 429

在使用element组件中，layout布局控件能够很好的帮我们对页面进行布局。其中最常用到的就是栅格基础布局。如下所示

<el-row :gutter=40>
	<el-col :xs="12" :sm="12" :lg="6">第一个</el-col>
</el-row>

对于el-row，其常用属性和方法下表

参数说明可选值 gutter 栅格间距 type 布局模式，可选flex gutter 栅格间距

对于el-col，常用属性和方法如下，其中xs，sm，lg，md，xl为响应式布局，通过窗口大小来改变盒子占据的栅格数

参数说明可选值 span 栅格占据的列数默认值为24 offset 栅格左侧间隔格数 xs <768px 响应式栅格数或者栅格属性对象{span：8， offset： 3}表示窗口小于768px时span为8，offset为3 sm >=768px 同上 md >=992px 同上 lg >=1200px 同上 xl >=1920px 同上

更多详细介绍的话可以查看

免费搭建微信查券返利机器人来轻松赚佣金

文章来自:IT技术分享网
分享地址:http://www.5ityx.cn/cate100/30217.html

上一篇： IDEA上Java项目控制台中文乱码

下一篇： .gitignore 文件不生效问题 & 解决方法

el-element布局控件layout中的el-row和el-col

el-element布局控件layout中的el-row和el-col 相关内容

聚合标签