Element-UI el-row 排版样式错乱

史上最菜开发

已于 2025-01-15 17:26:30 修改

阅读量1.6k

点赞数 6

CC 4.0 BY-SA版权

文章标签： vue.js javascript ecmascript

于 2023-10-30 16:22:57 首次发布

本文链接：https://blog.csdn.net/weixin_45849417/article/details/134122056

博客指出Element-UI中el-row、el-col配合el-form表单使用时会造成样式错乱问题，并给出多种解决办法，如在el-row上添加特定样式，合理设置el-col数量，还可尝试缩小表单等，部分方法在IE浏览器中有效。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>

如图：
在这里插入图片描述
解决方法三：这个方法是后面补充的，我百度别人发现的（2025年1月15日）
有可能你的代码是，一个el-row,里面有很多个el-col,这样也有可能，我们可以这样操作

<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  gutter="10">
	<el-col :span="8"></el-col>
	<el-col :span="8"></el-col>
	<el-col :span="8"></el-col>
</el-row>
<el-row  gutter="10">
	<el-col :span="8"></el-col>
	<el-col :span="8"></el-col>
	<el-col :span="8"></el-col>
</el-row>

反正加起来够24就可以了，如果是6，那就放四个。
如果都没有用，可以用第三四个骚操作：
把表单设置小一点：

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

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