element UI一gutter设置为大于0时，el-row宽

*在使用珊格系统时，如果使用了有分隔的布局, gutter设置为大于0时，会使页面宽度溢出出现滚动条，达不到自己想要的布局效果

<el-row class="row-gutters" :gutter="20">

        <el-col :span="8">

               <el-form-item label="手机号：">

                     <el-input  placeholder="请输入用户手机号"></el-input>

               </el-form-item>

       </el-col>

         <el-col :span="8">

                <el-form-item label="地区：">

                      <el-input  placeholder="请选择地区"></el-input>

                </el-form-item>

         </el-col>

 </el-row>

解决方法

1、为父容器设置隐藏横向滚动条的样式    overflow-x: hidden;   如果父容器加了边框还得加上   box-sizing: border-box;

2、为父容器设置一定的padding，并且将box-sizing设置为border-box，padding的设置根据你需要设置的间隔来定

box-sizing: border-box;

    padding: 0 20px;