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`,
+        };
+      }
     },
   },