本文详细介绍了Element UI中的布局组件，包括基础的24分栏布局、分栏间隔、混合布局和分栏偏移。通过span和offset属性，可以灵活调整元素的位置。此外，还重点讲解了响应式布局，利用xs, sm, md, lg, xl五种尺寸实现不同屏幕下的适配。通过设置class类名，可以控制不同屏幕下col的显示。文章结合实践操作，便于读者理解和应用。
layout布局(24分栏布局）用到的标签为：<el-row><el-col>
一：基础布局(通过 row 和 col 组件，并通过 col 组件的 span 属性自由的组合布局。)
样式自定义即可
二：分栏间隔
分栏布局 只需要在<el-row>标签上定义gutter(中文沟的意思)属性
如：<el-row :gutter='20'>
这里的20什么意思呢？首先是以px为单位，就是说间距为20px
实际情况如何呢？
首先间距20px是拆分为做左右个10px,在<el-row>标签中为margin-left:-10px和margin-right:-10px;在<el-col>标签中为 padding-left:10px和padding-right:10px
三：混合布局
其实根据实际情况的需求设置每个el-row中的el-col的span数量
四：分栏偏移
主要就是通过制定 col 组件的 offset 属性可以指定分栏偏移的栏数。
<el-col :span="6" :offset="6">
其次还可以通过push和pull实现右移和左移格数 <el-col :span="6" :pull="6">
五:响应式布局
分为5个尺寸:xs(最小屏) sm(小屏） md(中屏） lg(大屏） xl(最大屏)
这样的话我们就可以根据实际情况来实现不同屏幕下的布局
当然我们也可以 根据需求来设定每个col在不同屏幕中是否需要展示，具体操作为：
在main.js中导入对应的类库
然后只需要在对应的col中设置对应的class类名即可
以上就是element中layout布局全部内容(加了一部分自己的理解和自己实践操作后的东西，方便大家理解)
扫一扫
8382
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
