vue中行el-row与el-row之间的距离
时间: 2025-06-17 08:48:47 浏览: 19
### 在 Vue 中设置 el-row 组件之间的间距
在使用 `element-ui` 的 `el-row` 和 `el-col` 组件时,可以通过设置 `gutter` 属性来调整列之间的间距。`gutter` 属性定义了行内列之间的间距,单位为像素。以下是一个完整的实现方法[^1]。
```vue
<template>
<div>
<!-- 设置 gutter 属性以控制列之间的间距 -->
<el-row :gutter="20">
<el-col :span="12">
<div class="grid-content bg-purple">列1</div>
</el-col>
<el-col :span="12">
<div class="grid-content bg-purple-light">列2</div>
</el-col>
</el-row>
</div>
</template>
<style>
/* 自定义样式 */
.grid-content {
border: 1px solid #ccc;
padding: 20px;
text-align: center;
}
.bg-purple {
background-color: #d3dce6;
}
.bg-purple-light {
background-color: #e5e9f2;
}
</style>
```
需要注意的是,`gutter` 属性仅适用于同一行内的列间距调整,而如果需要调整不同 `el-row` 组件之间的垂直间距,则需要通过自定义 CSS 类来实现[^2]。
例如,可以通过为 `el-row` 添加一个自定义类名,并在样式中定义上下外边距(margin)来实现:
```vue
<template>
<div>
<el-row class="custom-row">
<el-col :span="24">
<div class="grid-content bg-purple">第一行</div>
</el-col>
</el-row>
<el-row class="custom-row">
<el-col :span="24">
<div class="grid-content bg-purple-light">第二行</div>
</el-col>
</el-row>
</div>
</template>
<style>
.custom-row {
margin-bottom: 20px; /* 设置行与行之间的垂直间距 */
}
</style>
```
上述代码展示了如何通过 `gutter` 属性和自定义 CSS 来分别调整水平和垂直方向的间距[^1]。
### 注意事项
- 如果需要动态调整间距,可以将 `gutter` 属性绑定到数据变量上,例如 `:gutter="dynamicGutter"`。
- 自定义 CSS 类的优先级可能受到全局样式的干扰,因此建议使用更具体的样式选择器或增加 `!important` 标记[^2]。
阅读全文
相关推荐


















