使用element-ui 的 el-row布局，设置gutter失效

最新推荐文章于 2024-04-17 16:03:39 发布
最新推荐文章于 2024-04-17 16:03:39 发布
阅读量5.4k 收藏 1
点赞数 1
文章标签： elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_55448604/article/details/120795424
版权

问题描述：

在项目中使用el-row布局时，想设置一个间距，结果发现间距失效

<el-row :gutter="20">
        <el-col :span="12" style="border:1px solid #000">
        </el-col>
        <el-col :span="12" style="border:1px solid #000">
        </el-col>
</el-row>

原因分析：

后面发现是因为 gutter 的实现方式是设置el-col的style，而我当时写demo的时候直接在el-col上设置的style，就导致gutter的间距样式不起作用。 所以如果想设置样式的话就直接加个class，设置class的样式就好了

在这里插入图片描述

迪丽小锅巴
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
atom-better-git-blame：Atom git blame gutter，具有拉取请求，相关问题和代码的年龄颜色编码
01-29
:warning_selector: 您仍然可以使用此插件，但不再维护。 我们正在工作。 :warning_selector: 更好的Git Blame Atom软件包 在Atom中查看git blame信息的更好方法。 什么使它更好？ TL; DR：它不仅仅在装订线中显示git blame批注-它还可以帮助您可视化显示blame信息，包括代码的使用期限。 丰富的弹出窗口显示有关提交的摘要信息，并可视化提交的年龄。 行高亮显示可清楚地归咎于blacommit引入了其他哪些行。 哦，它的速度也很好，设计也很好。 如何使用？ 使用ctrl-b切换非常规装订线。 或者，右键单击要怪的文件，然后选择Toggle Better Git Blame ，或在（ cmd-shift-p ）中搜索此命令。 将鼠标悬停在非常规文本上以显示弹出窗口和行高亮显示。 如何设置？ 运行apm install better-git-blame并重新启动Atom。 您也可以从Atom的“设置”窗格中进行安装。 遥测 我们收集匿名使用数据。 我们不会跟踪任何敏感或个人身份数据，我们收集的信息仅用于改
gutter-preview
05-06
图像预览-Visual Studio代码扩展 在装订线和悬停时显示图像预览 看起来像这样 安装 变更记录 0.27.1 更新变更日志 0.27.0 更新依赖 修复与临时文件相关的问题 0.26.2 更新依赖 0.26.1 将vscode引擎版本更新为1.44.0 0.26.0 支持markdown图像语法中带有空格的路径（由@episage贡献） 0.25.0 将“打开包含文件夹”链接添加到悬停消息 0.24.0 如果currentColorForSVG设置为空字符串，则跳过svg-s的样式注入 0.23.0 将webp添加到acceptedExtensions（由@ Afsar-Pasha贡献） 0.22.3 修复URI中特殊字符的处理 0.22.2 修复文件URI处理 0.22.1 从程序包中删除不必要的文件 0.22.0 使用webpack捆绑扩展 更新到vscode@1.
Element-UI 使用el-row 分栏布局的教程
01-18
使用多个卡片显示的时候，并且要求当列数到一定数目的时候，要自动换行，el-container 布局就满足了需求了，就要用到el-row 布局做分栏处理， 代码如下 <div slot=header
element ui 中el-row的gutter失效
zoukunyang的博客
04-29 2550
问题描述 在使用element ui中的el-row的gutter属性时，组件无法实现间隔 对应的错误代码 <el-row :gutter="20"> <el-col :span="6" class="col">占用6份</el-col> <el-col :span="6" class="col">占用6份</el-col> <el-col :span="6" class="col">占用6份&lt
VUE爬坑之路--Element-UI el-row、el-col、Select下拉框等点击事件不触发问题解决方法
吴冬雪的博客
05-22 1万+
在使用element-ui组件中card、row、el-col等组件，添加点击事件@click="handleClick（）"，都无法触发点击事件。@click.native="handleClick（）" 可以解决这个问题。在点击请选择部门的时候不能触发点击事件getFood()。
el-row :gutter
weixin_42600407的博客
01-05 6264
el-row :gutter 是在 Vue.js 项目中使用的一个属性，用于为 el-row 组件添加间隔。具体来说，它会在 el-row 内部的所有 el-col 组件之间添加一些空间，以达到分隔的效果。 你可以将 el-row :gutter 属性的值设为数字，表示要添加的空间的宽度，单位为像素。例如： <el-row :gutter="20"> <el-col :spa...
element ui el-row标签中的gutter干嘛用的
servepeople的博客
09-08 5147
属性用于设置行内列之间的间距（空隙）。这个属性通常用于控制列之间的水平间距，使得布局看起来更加美观和整齐。属性的值，你可以自定义列之间的间距以满足你的布局需求。这有助于创建各种不同样式的页面布局。属性来设置列之间的空隙，以增加页面的可读性和美观度。在 Element UI 的。在上面的示例中，我们在。（列）时，你可以使用。
关于el-row中gutter属性未生效的原因
weixin_44240448的博客
04-12 1866
出现el-row中gutter属性未生效的几种情况
element-ui库的el-row的gutter=10间距失效问题
热门推荐
weixin_43858540的博客
09-23 2万+
el-row的gutter失效问题 完整代码在vue中可直接执行 若想gutter间距效果体现出来，需要将css样式，（如：border，background等），添加在el-col的子标签div中的class下才能生效 类名添加在el-col中样式是有了，但是间距确不体现 html代码 <el-row :gutter='20'> <el-col :span='6'><div class="gutter">132465</div></el-col&g
element ui中el-row的gutter属性失效的问题
叶卡捷琳堡的博客
07-17 1万+
文章目录问题描述问题解决 问题描述 在使用element ui中的el-row的gutter属性时，组件无法实现间隔，在设置了gutter属性后，依然维持原样，而控制台不报错 如图 对应的错误代码 <template> <div> <h3>layout组件的使用</h3> <!--创建页面中的一行--> <el-row :gutter="20"> <el-col :span="6" cla
scrollbar-gutter-explainer：“ scrollbar-gutter” CSS属性的解释器
02-25
这使Web作者在其布局如何与浏览器提供的滚动条交互方面更具代理权，因此他们可以例如防止内容扩展时布局发生过多更改，同时在不需要滚动时避免不必要的视觉效果。 请注意，滚动条本身的存在是由overflow属性确定的...
postcss-variables-loader:使用Webpack + HMR在CSS和JS之间共享变量
04-28
允许您使用Webpack和HMR在CSS和JS之间共享变量。 该加载器将特殊CSS文件转换为JS模块。 CSS和JS之间的共享变量 HMR友好，CSS更改可即时应用。 为使JS更友好，加载器将： 从CSS px数字中删除px部分 将破折号转换...
vue element-ui 饿了么布局，gutter间距碰上bordr 会失效
weixin_30693183的博客
08-16 947
//如下情况，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>...
报错：[Vue warn]: Invalid prop: type check failed for prop “gutter“. Expected Number with value 16, got
ALDNOAH_K的博客
03-05 3313
代码 <el-row gutter="16"> <!-- 产品名称 --> <el-col :span="24"> <el-form-item label="产品名称" prop="field108"> <el-select v-model="formData.field108" placeholder="请选择下拉选择" clearable
el-row的gutter注意事项
weixin_41171651的博客
12-01 2334
注意gutter会使el-row的容器宽度增加20px，在全屏宽度时候可能会导致出现横向滚动条。可在el-row父元素设置。
[转](1条消息) element-ui库的el-row的gutter=10间距失效问题(转载请删除括号里的内容)
jiaoqi6132的博客
04-08 3714
el-row的gutter失效问题 完整代码在vue中可直接执行 若想gutter间距效果体现出来，需要将css样式，（如：border，background等），添加在el-col的子标签div中的class下才能生效类名添加在el-col中样式是有了，但是间距确不体现 html代码 <el-row :gutter='20'> <el-col :span='6'><div class="gutter">132465</d...
换行后均匀分布
weixin_42934446的博客
01-23 1352
我想实现换行之后能够平均布局，试了很多方法，你们都可以试试，没准我不行的你们可以。 法一：这个主要是看看什么是 justify-content: space-evenly; css代码 container{ display: flex; flex-flow: row nowrap; align-items: center; justify-content: space-between; //justify-content: spac...
Vue：Vue的element组件中的el-row的属性gutter什么意思？
XRT_knives的博客
12-04 1万+
Vue：Vue的element组件中的el-row的属性gutter什么意思？ 资源 gutter elementui中gutter和offset的区别
el-form表单根据条件触发校验
最新发布
凡尘
04-17 210
el-form表单根据条件触发校验。
vue的el-row :gutter设置行间距
12-24
在Vue的Element UI中，可以使用el-row的gutter属性来设置行内列之间的间距（行间距）。这个属性通常用于控制列之间的水平间距，以增加页面的可读性和美观度。 以下是一个示例代码，演示了如何使用el-row的gutter属性来设置行间距为20px： ```html <template> <el-row :gutter="20"> <el-col :span="12">Column 1</el-col> <el-col :span="12">Column 2</el-col> </el-row> </template> ``` 在上述代码中，el-row的gutter属性被设置为20，表示行内列之间的间距为20px。这样，Column 1和Column 2之间就会有一个20px的间距。 注意：gutter属性的值可以是任意有效的CSS长度单位，例如px、rem等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值