Element之layout布局 |
您所在的位置:网站首页 › el-col标签中的span属性的作用 › Element之layout布局 |
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 |