element plus el-row 行间距
时间: 2025-05-19 11:14:52 浏览: 43
在 Element Plus 中,`el-row` 组件可以通过 `gutter` 属性来设置行间距以及列间距。该属性定义了每行列之间的间隔大小,单位为像素(px),默认值为 0。当设置了 `gutter` 值时,会在相邻的 `el-col` 列之间生成相应的间距[^1]。
以下是关于如何正确配置和使用 `gutter` 的说明:
### 设置 Gutter 的基本语法
```html
<el-row :gutter="20">
<el-col :span="12"><div class="grid-content">Column</div></el-col>
<el-col :span="12"><div class="grid-content">Column</div></el-col>
</el-row>
```
在此示例中,`:gutter="20"` 表明两列间的水平间距被设定为 20px。需要注意的是,如果仅有一列存在,则即使指定了 `gutter`,也不会有任何效果,因为至少需要两列才能显现间隙[^2]。
另外,为了更好地展示不同宽度下的布局变化情况,可以采用如下混合布局的方式:
```html
<el-row :gutter="20">
<el-col :span="8"><div class="grid-content ep-bg-purple"></div></el-col>
<el-col :span="8"><div class="grid-content ep-bg-purple-light"></div></el-col>
<el-col :span="8"><div class="grid-content ep-bg-purple"></div></el-col>
</el-row>
```
上述代码片段展示了三列均分的情况,并且由于设置了 `:gutter="20"` ,各列间会有均匀分布的 20px 宽度的空间分割开它们[^3]。
值得注意的一点是,虽然我们主要讨论的是水平方向上的间距调整,但实际上垂直方向上也可以借助额外样式规则达成类似功能。不过这超出了单纯依靠 `gutter` 参数所能完成的功能范围之外。
#### 注意事项
- 如果发现按照官方文档操作却未能生效,请确认项目所依赖的具体版本号是否匹配最新特性支持状况。
- 对于某些特殊场景比如动态加载数据后重新渲染列表等情况可能还需要手动触发更新视图逻辑以确保最终呈现符合预期设计。
相关问题
阅读全文
相关推荐

















