fix(Layout): outside of the screen after setting gutter (#6143)

src/col/index.js

@@ -1,8 +1,11 @@
 import { createNamespace } from '../utils';
+import { ChildrenMixin } from '../mixins/relation';
 
 const [createComponent, bem] = createNamespace('col');
 
 export default createComponent({
+  mixins: [ChildrenMixin('vanRow')],
+
   props: {
     span: [Number, String],
     offset: [Number, String],
@@ -14,12 +17,29 @@ export default createComponent({
 
   computed: {
     gutter() {
-      return (this.$parent && Number(this.$parent.gutter)) || 0;
+      return (this.parent && Number(this.parent.gutter)) || 0;
     },
 
     style() {
-      const padding = `${this.gutter / 2}px`;
-      return this.gutter ? { paddingLeft: padding, paddingRight: padding } : {};
+      const { index, gutter } = this;
+
+      if (gutter) {
+        const count = this.parent.children.length;
+        const padding = (gutter * (count - 1)) / count;
+
+        if (index === 0) {
+          return { paddingRight: `${padding}px` };
+        }
+
+        if (index === count - 1) {
+          return { paddingLeft: `${padding}px` };
+        }
+
+        return {
+          paddingLeft: `${padding / 2}px`,
+          paddingRight: `${padding / 2}px`,
+        };
+      }
     },
   },
 

src/col/test/__snapshots__/demo.spec.js.snap

@@ -21,10 +21,10 @@ exports[`renders demo correctly 1`] = `
     </div>
   </div>
   <div>
-    <div class="van-row" style="margin-left: -10px; margin-right: -10px;">
-      <div class="van-col van-col--8" style="padding-left: 10px; padding-right: 10px;">span: 8</div>
-      <div class="van-col van-col--8" style="padding-left: 10px; padding-right: 10px;">span: 8</div>
-      <div class="van-col van-col--8" style="padding-left: 10px; padding-right: 10px;">span: 8</div>
+    <div class="van-row">
+      <div class="van-col van-col--8" style="padding-right: 13.333333333333334px;">span: 8</div>
+      <div class="van-col van-col--8" style="padding-left: 6.666666666666667px; padding-right: 6.666666666666667px;">span: 8</div>
+      <div class="van-col van-col--8" style="padding-left: 13.333333333333334px;">span: 8</div>
     </div>
   </div>
   <div>