Element-UI el-row el-col 配合el-form 表单使用，造成样式的错乱。
如图：

![在这里插入图片描述](https://img-blog.csdnimg.cn/13520a35e3d44e4099b5bc04d5201f29.png#pic_center

大概就是这个，代码：

<el-row  gutter="10">
	<el-col :span="8"></el-col>
	<el-col :span="8"></el-col>
	<el-col :span="8"></el-col>
</el-row>

解决办法一：

.el-row {
    display: flex; //设置布局
    flex-wrap: wrap; //进行换行操作
}

解决办法二：
在el-row上添加style=“flex-wrap: wrap; flex-direction: row”

<el-row  gutter="10" style="flex-wrap:wrap; flex-direction: row">
	<el-col :span="8"></el-col>
	<el-col :span="8"></el-col>
	<el-col :span="8"></el-col>
</el-row>

如图：

如果都没有用，可以用第三个骚操作：
把表单设置小一点：

size="small"
<el-form :model="ruleForm"  size="small"  :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"></el-form>

也可以试试这个方法。
上面两个方法我在IE浏览器都没用，在第三个方法实现了。