Element之layout布局

您所在的位置:网站首页 el-col标签中的span属性的作用 Element之layout布局

Element之layout布局

2023-12-14 10:57| 来源: 网络整理| 查看: 265

layout布局(24分栏布局)用到的标签为:

一:基础布局(通过 row 和 col 组件,并通过 col 组件的 span 属性自由的组合布局。)

样式自定义即可

二:分栏间隔

 分栏布局 只需要在标签上定义gutter(中文沟的意思)属性

如:

这里的20什么意思呢?首先是以px为单位,就是说间距为20px

实际情况如何呢?

首先间距20px是拆分为做左右个10px,在标签中为margin-left:-10px和margin-right:-10px;在标签中为 padding-left:10px和padding-right:10px

 三:混合布局

其实根据实际情况的需求设置每个el-row中的el-col的span数量

四:分栏偏移

 主要就是通过制定 col 组件的 offset 属性可以指定分栏偏移的栏数。

其次还可以通过push和pull实现右移和左移格数   

 

 五:响应式布局

分为5个尺寸:xs(最小屏)    sm(小屏)  md(中屏)    lg(大屏) xl(最大屏)

这样的话我们就可以根据实际情况来实现不同屏幕下的布局

当然我们也可以 根据需求来设定每个col在不同屏幕中是否需要展示,具体操作为:

在main.js中导入对应的类库

 然后只需要在对应的col中设置对应的class类名即可

 以上就是element中layout布局全部内容(加了一部分自己的理解和自己实践操作后的东西,方便大家理解)



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3