element ui 中el-row的gutter失效

最新推荐文章于 2025-08-20 09:12:33 发布

原创最新推荐文章于 2025-08-20 09:12:33 发布 · 3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #elementui

ui组件专栏收录该内容

4 篇文章

订阅专栏

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

问题描述

在使用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>