el-form和el-col响应式布局

说明

首先如果使用:inline="true"元素，这个好处在于能够左右元素保持在同一行，可惜里面有bug，和el-col同时使用，就会出现el-input换行，即便调整好，放大缩小也会出现换行问题。
为了解决这一问题，只能放弃使用:inline=“true”。

效果

代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://unpkg.com/vue/dist/vue.js"></script><script src="https://unpkg.com/element-ui@2.15.2/lib/index.js"></script></head><body><script src="//unpkg.com/vue/dist/vue.js"></script><script src="//unpkg.com/element-ui@2.4.3/lib/index.js"></script><div id="app"><el-form ref="form" :model="form" label-width="80px"><el-row><el-col :span="8"><el-form-item label="活动名称" :inline="false"><el-input v-model="form.name"></el-input></el-form-item></el-col><el-col :span="8"><el-form-item label="活动区域"><el-select v-model="form.region" placeholder="请选择活动区域"><el-option label="区域一" value="shanghai"></el-option><el-option label="区域二" value="beijing"></el-option></el-select></el-form-item></el-col><el-col :span="8"><el-form-item label="活动名称1"><el-input v-model="form.name1"></el-input></el-form-item></el-col></el-row><el-row><el-col :span="6"><el-form-item label="活动名称2"><el-input v-model="form.name2"></el-input></el-form-item></el-col><el-col :span="6"><el-form-item label="活动区域2"><el-select v-model="form.region2" placeholder="请选择活动区域"><el-option label="区域一" value="shanghai"></el-option><el-option label="区域二" value="beijing"></el-option></el-select></el-form-item></el-col><el-col :span="6"><el-form-item label="活动名称3"><el-input v-model="form.name3"></el-input></el-form-item></el-col><el-col :span="1.5" class="elrow"><el-form-item class="btnLeft"><el-button type="primary" icon="el-icon-search" size="mini">查询</el-button></el-form-item></el-col><el-col :span="1.5" class="elrow"><el-form-item class="btnLeft"><el-button type="primary" icon="el-icon-refresh" size="mini">重置</el-button></el-form-item></el-col></el-row></el-form></div></body><script>var app = new Vue({el: '#app',data() {return {form: {name: '',region: '',name2: '',name3: '',region2: '',}}},methods: {onSubmit() {console.log('submit!');}}});</script><style scoped>@import url("//unpkg.com/element-ui@2.15.2/lib/theme-chalk/index.css");.elrow .el-form-item__content {margin-left: 10px!important;}</style></html>

el-form和el-col响应式布局相关推荐

vue 实现 web端滚动刷新排序筛选响应式布局 (源码)
vue 实现 web端滚动刷新排序筛选响应式布局先展示效果图源码: <template><div> <div class=&qu ...
20.【移动端Web开发之响应式布局】
文章目录 [移动端Web开发之响应式布局]前端小抄(20) 一.响应式开发 1.1 响应式开发原理 1.2 响应式布局容器二.Bootstrap前端开发框架 2.1 Bootstrap简介 2.2 ...
移动WEB开发五、响应式布局
零.文章目录文章地址个人博客-CSDN地址:https://blog.csdn.net/liyou123456789 个人博客-GiteePages:https://bluecusliyou.gi ...
Vue框架设置响应式布局
最近折腾自己的网站,在自适应方面发现有了很多新的方法,感叹前端的技术真是日新月异,从以前只能这样,到现在除了这样,还可以那样,甚至再那样......技术永无止境啊. 回到主题,自适应响应式布局这个话题 ...
总是听别人说响应式布局，原来这么简单
总听别人说响应式布局,觉得是一个很高大上的东西,近日做的一个项目需要适配不同的屏幕尺寸,于是就简单研究了一下 Web响应式布局,其实原理很简单,下面就简单整理了一下分享给大家. 什么是响应式布局如图 ...
Bootstrap响应式布局以及栅格框架
一.Bootstrap简单配置简单使用Bootstrap,只需引入: <script type="text/javascript" src="js/jquery. ...
【探索HTML5第二弹05】响应式布局（中），一步一步响应式布局
前言前天初步探究了一次响应式布局,虽然花了一天功夫,做出来的东西还是不行,在此我还是认为要做响应式布局设计应该先行,应该先制作3个以上的设计图出来,但是对于手机来说,图片流量也是个问题,但是这个我们 ...
移动端WEB开发之响应式布局(响应式开发原理、bootstrap、阿里百秀案例)
移动端WEB开发之响应式布局 1.1 响应式开发原理就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的. 设备的划分情况: <!DOCTYPE html> & ...
CSS3与页面布局学习笔记（四）——页面布局大全(负边距、双飞翼、多栏、弹性、流式、瀑布流、响应式布局)
一.负边距与浮动布局 1.1.负边距所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...
响应式布局——Bootstrap
二.BootStrap 1.1 BootStrap简介目标:使用BootStrap框架快速开发响应式网页 Bootstrap是由Twitter公司开发维护的前端UI框架,它提供了大量编写好的CSS样 ...

el-form和el-col响应式布局

说明

效果

代码

el-form和el-col响应式布局相关推荐

最新文章

热门文章