el-row的gutter属性
时间: 2023-11-06 07:02:41 浏览: 55
在El-Row中,gutter属性用于设置行与行之间的间距大小。它可以接受一个数字或字符串类型的值。如果使用数字,单位为像素;如果使用字符串,则可以使用CSS中的其他单位,例如“em”、“rem”、“%”等。默认情况下,gutter属性的值为0,即行之间没有间距。例如,使用以下代码可以设置行与行之间的间距为20像素:
```html
<el-row :gutter="20">
<el-col :span="12">Column 1</el-col>
<el-col :span="12">Column 2</el-col>
</el-row>
```
在上述代码中,gutter属性的值为20,表示行与行之间的间距为20像素。然后,在该行中包含两个列,每个列的宽度为50%。
相关问题
el-row gutter
当el-row的gutter属性有值的时候,会出现横向滚动条。这个问题也存在于plus版本中。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [elementui layout(el-row)组件有横向滚动条(gutter)](https://blog.csdn.net/jiangbinwangyi/article/details/129946361)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]
el-row的gutter
el-row是Element UI中的一个布局组件,用于创建网格系统。gutter是el-row的一个属性,用于设置行之间的间距。
通过设置gutter属性,可以在el-row中添加水平方向的间距。gutter可以接受一个数字或者一个对象作为值。当传入一个数字时,表示行之间的间距为固定的像素值;当传入一个对象时,可以分别设置水平和垂直方向的间距。
以下是el-row的gutter属性的使用示例:
```html
<template>
<el-row :gutter="20">
<el-col :span="12">
<!-- 第一列内容 -->
</el-col>
<el-col :span="12">
<!-- 第二列内容 -->
</el-col>
</el-row>
</template>
```
在上述示例中,通过设置gutter属性为20,实现了行之间的水平间距为20像素。