解决element ui el-row el-col里面高度不一致问题

更新时间：2024年08月06日 09:37:49 作者：代码搬运媛

这篇文章主要介绍了解决element ui el-row el-col里面高度不一致问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

element ui el-row el-col里面高度不一致问题

用饿了吗el-row，el-col布局页面的时候会因为el-col的内容高度不统一，造成布局混乱

解决方案

就是在el-row中添加type=“flex”

vue ElementUi 修改el-row的高度

添加如下css样式

.el-row{
	margin-bottom: -15px;
	display: flex;
	flex-wrap: wrap
}

修改前：

修改后：

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Vue前端利用slice()方法实现分页器
分页功能是常见的需求之一，本文主要介绍了Vue前端利用slice()方法实现分页器，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-07-07
vue3 watch和watchEffect的使用以及有哪些区别
这篇文章主要介绍了vue3 watch和watchEffect的使用以及有哪些区别，帮助大家更好的理解和学习vue框架，感兴趣的朋友可以了解下
2021-01-01
Vue异步组件处理路由组件加载状态的解决方案
这篇文章主要介绍了Vue异步组件处理路由组件加载状态的解决方案，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
2018-09-09
Vue实现input宽度随文字长度自适应操作
这篇文章主要介绍了Vue实现input宽度随文字长度自适应操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-07-07
vue页面图片不显示问题解决方案
这篇文章主要介绍了vue页面图片不显示问题解决方案,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
2021-09-09
vue3中使用ref和emit来减少props的使用示例详解
现在在开发vue3项目的过程中，我们开发小组渐渐的减少props的使用，转而用ref 和 emit 来代替，这篇文章主要介绍了vue3中使用ref和emit来减少props的使用,需要的朋友可以参考下
2022-06-06
vue3中$refs的基本使用方法
在Vue中一般很少会用到直接操作DOM，但不可避免有时候需要用到，这时我们可以通过ref和$refs这两个来实现,下面这篇文章主要给大家介绍了关于vue3中$refs的基本使用方法,需要的朋友可以参考下
2022-03-03
vue打包后修改配置后端IP地址、端口等信息两种方法
这篇文章主要给大家介绍了关于vue打包后修改配置后端IP地址、端口等信息的两种方法,文中通过代码示例以及图文介绍的非常详细,对大家学习或者使用vue打包具有一定的参考借鉴价值,需要的朋友可以参考下
2023-09-09
Vue中渲染系统模块的实现详解
想要实现一个简洁版的Mini-Vue框架，应该包含三个模块：分别是：渲染系统模块、可响应式系统模块、应用程序入库模块，本文主要介绍的是渲染系统模块的实现，需要的可以参考一下
2023-07-07
vuex新手进阶篇之actions的使用方法
actions用来处理mutations中的异步操作,触发mutations中的函数,下面这篇文章主要给大家介绍了关于vuex新手进阶篇之actions的使用方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-10-10