el-row :gutter作用
时间: 2024-01-31 07:09:39 浏览: 154
Element-UI 使用el-row 分栏布局的教程
el-row的gutter属性用于设置行内列之间的间距。通过设置gutter属性,可以在el-row中的el-col之间创建一个固定的间距,使得页面布局更加美观和整齐。
例如,如果我们在el-row上设置了gutter属性为20,那么el-row中的每个el-col之间都会有一个20像素的间距。
以下是一个示例代码:
```html
<template>
<el-row :gutter="20">
<el-col :span="8">
<!-- 第一个列 -->
</el-col>
<el-col :span="8">
<!-- 第二个列 -->
</el-col>
<el-col :span="8">
<!-- 第三个列 -->
</el-col>
</el-row>
</template>
```
在上面的示例中,我们在el-row上设置了gutter属性为20,这样每个el-col之间就会有一个20像素的间距。
阅读全文