调整el-row之间的间距

### 修改 `el-row` 组件的行间距

在 Element UI 中，通过设置 `el-row` 标签内的 `gutter` 属性可以调整列之间的间距。此属性定义了每两列之间水平方向上的间隙大小。

对于希望生效的 gutter 设置，在确保语法正确的同时还需要注意样式冲突等问题。如果遇到 `gutter` 失效的情况，可能是由于自定义 CSS 或其他因素干扰所致[^2]。下面是一个有效的配置实例：

<template>
  <div id="app">
    <!-- 正确设置了 gutter 的例子 -->
    <el-row :gutter="20"> 
      <el-col :span="6" v-for="(item, index) in items" :key="index" class="col">
        占用6份
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: Array(4).fill('') // 创建四个相同的项来填充 col
    }
  }
}
</script>

<style scoped>
.col { /* 添加一些基本样式以便观察效果 */
  background-color: #cfd7e5;
  height: 100px;
  margin-bottom: 10px;
}
</style>

为了使上述代码正常工作并显示出预期的效果，请确认项目中已安装最新版本的 Element UI 库，并且没有额外的全局或局部样式覆盖默认行为。