gutter属性举例
时间: 2023-08-29 21:08:03 浏览: 81
"gutter" 属性用于设置 "el-row" 组件中各列之间的间距大小,可以是一个数值或一个数组。例如,如果你想要让各列之间的间距为 20px,可以在 "el-row" 元素上添加 "gutter" 属性,如下所示:
```
<template>
<el-row :gutter="20">
<el-col :span="12">Column 1</el-col>
<el-col :span="12">Column 2</el-col>
</el-row>
</template>
```
如果你想要设置不同列之间的间距大小,可以使用一个数组,如下所示:
```
<template>
<el-row :gutter="[20, 10]">
<el-col :span="12">Column 1</el-col>
<el-col :span="12">Column 2</el-col>
</el-row>
</template>
```
这个例子中,第一列与第二列之间的间距为 20px,第二列与第三列之间的间距为 10px。
相关问题
el-row的gutter属性
在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%。
css scrollbar-gutter
CSS的scrollbar-gutter属性可以控制滚动条留白的存在,以便在布局中更好地处理滚动条的展示。该属性可以帮助开发人员解决在页面中展示滚动条时可能影响布局的问题。[3]scrollbar-gutter属性可以在定义中使用,它允许Web作者决定是否保留用于显示滚动条的空间。具体来说,该属性允许开发人员在布局中预留一定的空间,以便在显示滚动条时不会导致页面内容被遮挡或移位。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)