element ui 中el-row的gutter失效

阿坤_21

于 2022-04-29 17:42:41 发布

阅读量2.9k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： ui组件文章标签： html5 elementui

本文链接：https://blog.youkuaiyun.com/zoukunyang/article/details/124500844

ui组件专栏收录该内容

4 篇文章

订阅专栏

在使用ElementUI的el-row组件设置gutter属性时，发现col元素之间没有出现预期的间隔。错误代码显示，直接在el-col内添加内容无法应用间隔。为解决此问题，可以在每个el-col内部添加div标签，并将内容放入div中，这样可以正确实现col之间的间隔。修改后的代码能够正常展示el-row的gutter效果。

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

问题描述

在使用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份</el-col>
      <el-col :span="6" class="col">占用6份</el-col>
    </el-row>

这时的col之间没有间距

解决问题

在el-col标签下添加div标签，就可以了

	<el-row :gutter="20">
      <el-col :span="6"><div class="col">占用6份</div></el-col>
      <el-col :span="6"><div class="col">占用6份</div></el-col>
      <el-col :span="6"><div class="col">占用6份</div></el-col>
      <el-col :span="6"><div class="col">占用6份</div></el-col>
    </el-row>