[随笔] el-row使用非零 gutter 时宽度溢出出现水平滚动条

在使用 elementUI 的 el-row 标签时，如果设置了 gutter 属性 且不为0，那莪会出现水平滚动条（宽度会溢出）

• 案例分析

<el-row :gutter="10">
  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
</el-row>

el-row 设置了 gutter 属性时，其父级组件没有留出足够的 padding 来，那么 element 似乎会给添加为负值的 padding-left 和 负值的 padding-right 来进行协调，此时会发现 el-row 被拉长了。

• 解决方案
  给父级容器留出足够的 padding 即可，需要注意容器 box-sizing 是否为 border-box ，确保 padding 属性生效。

.header {
  box-sizing: border-box;
  width: 100%;
  height: 60px;
  margin-bottom: 5px;
  padding: 0 10px; /* 给gutter留padding */
}