element-ui 响应式布局-栅格布局
2020-04-05 18:28
4411 查看
要注意的问题
- xs sm md lg xl五个尺寸的默认值均为24,意味着,任何一个尺寸属性不设置,则该尺寸下响应式宽度为24,这与bootstrap不同
- 尺寸属性可以设为0,则该el-col不显示
- 不论尺寸属性设置为多少,若el-col中没有任何内容则该el-col不显示(内部元素为空也不行,如 )
<el-row> <el-col :xs="12" :sm="9" :md="6" :lg="0" :xl="0">123</el-col> <el-col :xs="12" :sm="15" :md="18" :lg="21" :xl="24">456</el-col> </el-row>
- offset 属性是没有响应式的,可以通过加入一个带一个空格的el-col解决:
<el-col :xs="0" :sm="1" :md="2" :lg="3" :xl="3"> </el-col>
可以把固定的响应式布局作为组件
Vue.component('my-container',{ template:` <el-row> <el-col :xs="0" :sm="1" :md="2" :lg="3" :xl="4"> </el-col> <el-col :xs="24" :sm="22" :md="20" :lg="18" :xl="18"> <slot></slot> </el-col> <el-col :xs="0" :sm="1" :md="2" :lg="3" :xl="4"> </el-col> </el-row> ` });
调用就好了
<my-container> <div style="background: red">内容</div> </my-container>`
相关文章推荐
- VUE+ElementUI布局随笔
- Unity UI(九):UI布局之Layout Element、Content Size Fitter和Aspect Ratio Fitter
- 浅谈使用element ui + vuedraggable + sortablejs实现多种版式布局及托拽(1)
- 如何在vue项目中使用递归组件配合Element-ui布局侧边栏
- 浅谈使用element ui + vuedraggable + sortablejs实现多种版式布局及托拽(2)
- 背水一战 Windows 10 (72) - 控件(控件基类): UIElement - UIElement 的位置, UIElement 的布局, UIElement 的其他特性
- Vue-CLI项目快速UI布局-element-ui
- element-ui响应式布局
- vue踩坑记录 v-for 与elementUi layout布局的相关用法
- element-ui的table组件在flex布局下的宽高自适应
- element-UI 中beforeLeave用法
- (0010) iOS 开发之UI布局兼容 4s/5/6/7 屏幕解决方案
- element-ui的不稳定性
- WebStorm Vue ElementUI
- CSS:谈谈栅格布局
- elementui2.0图标错乱的问题
- element-ui中upload组件获取上传文件信息
- Android UI学习 - FrameLayou和布局优化
- 使用扩展方法对代码的行为进行封装的例子:封装UIElement的“拖动”
- AndroidUI 布局动画-布局内容改变动画