解读element ui el-row标签中的gutter用法
作者：serve the people
这篇文章主要介绍了解读element ui el-row标签中的gutter用法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
element ui el-row标签中的gutter用法
在 Element UI 的 el-row 标签中，gutter 属性用于设置行内列之间的间距（空隙）。
这个属性通常用于控制列之间的水平间距，使得布局看起来更加美观和整齐。
当你在一个 el-row 中包含多个 el-col（列）时，你可以使用 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>在上面的示例中，我们在 el-row 中设置了 gutter 属性为 20，这意味着 Column 1 和 Column 2 之间的水平间距为 20px。
通过调整 gutter 属性的值，你可以自定义列之间的间距以满足你的布局需求。这有助于创建各种不同样式的页面布局。
el-row的gutter注意事项
<el-row :gutter=20> <el-col :span=8></el-col> <el-col :span=8></el-col> <el-col :span=8></el-col> </el-row>
注意：
gutter会使el-row的容器宽度增加20px，因为存在margin-left:-10px、margin-right:-10px，在全屏宽度时候可能会导致出现横向滚动条。
可在el-row父元素设置overflow:hidden;
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。