//如下情况,gutter间距会失效
<el-row :gutter="20">
<el-col :span="12" style="border:1px solid #aaa;border-radius: 5px;padding:10px 0;display: inline-block;">
</el-col>
<el-col :span="12" style="border:1px solid #aaa;border-radius: 5px;padding:10px 0;display: inline-block;">
</el-col>
</el-row>

解答:

其实并不是失效,而是不能写在style里,因为 gutter 的实现方式是设置el-col的style所以如果,el-col本身就有style,gutter的间距样式就无法设置,所以看起来是失效了。

解决办法:

不让写style  家class就好了啊

												

vue element-ui 饿了么布局,gutter间距碰上bordr 会失效的更多相关文章

  1. 分享一个自搭的框架,使用Spring boot+Vue+Element UI

    废弃,新的:https://www.cnblogs.com/hackyo/p/10453243.html 特点:前后端分离,可遵循restful 框架:后端使用Spring boot,整合了aop.a ...

  2. Vue + Element UI 实现权限管理系统

    Vue + Element UI 实现权限管理系统 前端篇(一):搭建开发环境 https://www.cnblogs.com/xifengxiaoma/p/9533018.html

  3. vue + element ui 实现实现动态渲染表格

    前言:之前需要做一个页面,能够通过表名动态渲染出不同的表格,这里记录一下.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9786326.html 网站地址:我的 ...

  4. vue + element ui 表格自定义表头,提供线上demo

    前言:工作中用到 vue+element ui 的前端框架,需要使用自定义表头,需要使用 re.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9710826.h ...

  5. vue+element ui 的上传文件使用组件

    前言:工作中用到 vue+element ui 的前端框架,使用到上传文件,则想着封装为组件,达到复用,可扩展.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9 ...

  6. vue+element ui 的表格列使用组件

    前言:工作中用到 vue+element ui 的前端框架,有这个场景:很多表格的列有许多一样的,所以考虑将列封装为组件.转载请注明出处:https://www.cnblogs.com/yuxiaol ...

  7. vue+element ui 的tab 动态增减,切换时提示用户是否切换

    前言:工作中用到 vue+element ui 的前端框架,动态添加 Tab,删除 Tab,切换 Tab 时提示用户是否切换等,发现 element ui  有一个 bug,这里记录一下如何实现.转载 ...

  8. 基于 vue+element ui 的cdn网站(多页面,都是各种demo)

    前言:这个网站持续更新中...,有网上预览,github上也有源码,喜欢记得star哦,欢迎留言讨论. 网站地址:我的个人vue+element ui demo网站 github地址:yuleGH g ...

  9. vue + element ui 阻止表单输入框回车刷新页面

    问题 在 vue+element ui 中只有一个输入框(el-input)的情况下,回车会提交表单. 解决方案 在 el-form 上加上 @submit.native.prevent 这个则会阻止 ...

随机推荐

  1. Union 与 Union All 区别(抄的W3C School的,抄一遍就记住了!)

    Union ,UnionAll 俩都是用来合并两个或以上的查询结果集: Union操作符 :select语句中必须有相同的数列 (相等数量的列,不同结果集同一列的数据类型一致,列的顺序必须相同): u ...

  2. win10 .net framework 3.5 离线安装 不需要外网

    win 10如果安装系统时没有安装.net 3.5 那么在以后安装时就必须联网. win10 .net framework 3.5 离线安装工具: 链接: https://pan.baidu.com/ ...

  3. java 简单工具

    1.String操作 /** * 根据正则字符串过滤不需要的字符串 * @param arr * @param regex * @return */ public static String[] fi ...

  4. SpringBoot:3.SpringBoot使用Spring-data-jpa实现数据库访问

    做Web开发,首先要能将数据渲染到网页中展示,其次是要获取数据库数据展示到视图层,在前面的文章SpringBoot整合Thymeleaf模板引擎渲染web视图,我们实现了从后端数据展示到视图层,那么下 ...

  5. 【题解】Palindrome pairs [Codeforces159D]

    [题解]Palindrome pairs [Codeforces159D] 传送门:\(Palindrome\) \(pairs\) \([CF159D]\) [题目描述] 给定一个长度为 \(N\) ...

  6. 在excel实现多级联动

    最近做了一个Excel的多级联动的功能,具体是将全国所有的气象局按一二三四级单位做成四列,实现各级的联动下拉选择,这和省市县乡的各级联动的功能基本一样,下面记录下具体的操作步骤. 1.首先需要从数据库 ...

  7. 基于tensorflow的简单鼠标键盘识别

    import cv2 as cvimport tensorflow as tfimport numpy as npimport random ##以下为数据预处理,分类为cata,总共样本为cata* ...

  8. SAP HANA学习资料大全 Simple Finane + Simple Logisitic [非常完善的学习资料汇总]

    Check out this SDN blog if you plan to write HANA Certification exam http://scn.sap.com/community/ha ...

  9. vue学习整理

    1.webpack+vue自定义路径别名 vue-cli 用的是webpack,也可以使用webpack自定义别名这个功能,自定义别名这个功能当你在多层文件夹嵌套的时候不必一层一层找路径,直接使用自定 ...

  10. Springboot生成二维码并下载图片png支持打包成zip

    pom.xml <!--二维码--> <dependency> <groupId>com.google.zxing</groupId> <arti ...