Fix Radio & Checkbox margin again

components/form/style/index.less

@@ -161,6 +161,11 @@ form {
     display: block;
   }
 
+  .ant-checkbox-vertical + .ant-checkbox-vertical,
+  .ant-radio-vertical + .ant-radio-vertical {
+    margin-left: 0;
+  }
+
   .ant-input-number {
     margin-top: -1px;
     margin-right: 8px;

components/radio/radio.jsx

@@ -12,15 +12,20 @@ export default class Radio extends React.Component {
   }
   render() {
     const { prefixCls, children, checked, disabled, className, style } = this.props;
+    const wrapperClassString = classNames({
+      [`${prefixCls}-wrapper`]: true,
+      [`${prefixCls}-wrapper-checked`]: checked,
+      [`${prefixCls}-wrapper-disabled`]: disabled,
+      [className]: !!className,
+    });
     const classString = classNames({
       [`${prefixCls}`]: true,
       [`${prefixCls}-checked`]: checked,
       [`${prefixCls}-disabled`]: disabled,
-      [className]: !!className,
     });
     return (
-      <label className={classString} style={style}>
+      <label className={wrapperClassString} style={style}>
-        <RcRadio {...this.props} style={null} children={null} />
+        <RcRadio {...this.props} className={classString} style={null} children={null} />
         {children ? <span>{children}</span> : null}
       </label>
     );

components/radio/style/index.less

@@ -9,14 +9,19 @@
 .@{radio-group-prefix-cls} {
   display: inline-block;
   font-size: @font-size-base;
-  label {
-    margin-right: 16px;
-  }
 }
 
 // 一般状态
-.@{radio-prefix-cls} {
+.@{radio-prefix-cls}-wrapper {
   font-size: @font-size-base;
+  vertical-align: middle;
+  display: inline-block;
+  position: relative;
+  white-space: nowrap;
+  margin-right: 8px;
+}
+
+.@{radio-prefix-cls} {
   white-space: nowrap;
   outline: none;
   display: inline-block;
@@ -24,9 +29,6 @@
   line-height: 1;
   vertical-align: middle;
   cursor: pointer;
-  label& {
-    margin-right: 8px;
-  }
   &:hover,
   &-focused {
     .@{radio-inner-prefix-cls} {
@@ -118,119 +120,117 @@ span.@{radio-prefix-cls} + * {
   margin-right: 8px;
 }
 
-.@{radio-prefix-cls} {
+.@{radio-prefix-cls}-button-wrapper {
-  label&-button {
+  margin: 0;
-    background: #fff;
+  height: 28px;
-    padding: 0 16px;
+  line-height: 26px;
-    margin: 0;
+  color: #666;
-    height: 28px;
+  display: inline-block;
-    line-height: 26px;
+  transition: all 0.3s ease;
-    color: #666;
+  cursor: pointer;
-    display: inline-block;
+  border: 1px solid @border-color-base;
-    transition: all 0.3s ease;
+  border-left: 0;
-    cursor: pointer;
+  background: #fff;
-    border: 1px solid @border-color-base;
+  padding: 0 16px;
-    border-left: 0;
-
-    a {
-      color: #666;
-    }
 
-    > span.@{radio-prefix-cls}-button {
+  a {
-      margin-left: 0;
+    color: #666;
-      display: block;
+  }
-      width: 0;
-      height: 0;
-    }
 
-    .@{radio-group-prefix-cls}-large & {
+  > .@{radio-prefix-cls}-button {
-      height: 32px;
+    margin-left: 0;
-      line-height: 30px;
+    display: block;
-    }
+    width: 0;
+    height: 0;
+  }
 
-    .@{radio-group-prefix-cls}-small & {
+  .@{radio-group-prefix-cls}-large & {
-      height: 22px;
+    height: 32px;
-      line-height: 20px;
+    line-height: 30px;
-      padding: 0 12px;
+  }
-      &:first-child {
-        border-radius: @border-radius-sm 0 0 @border-radius-sm;
-      }
-      &:last-child {
-        border-radius: 0 @border-radius-sm @border-radius-sm 0;
-      }
-    }
 
+  .@{radio-group-prefix-cls}-small & {
+    height: 22px;
+    line-height: 20px;
+    padding: 0 12px;
     &:first-child {
-      border-radius: @border-radius-base 0 0 @border-radius-base;
+      border-radius: @border-radius-sm 0 0 @border-radius-sm;
-      border-left: 1px solid @border-color-base;
     }
-
     &:last-child {
-      border-radius: 0 @border-radius-base @border-radius-base 0;
+      border-radius: 0 @border-radius-sm @border-radius-sm 0;
     }
+  }
 
-    &:first-child:last-child {
+  &:first-child {
-      border-radius: @border-radius-base;
+    border-radius: @border-radius-base 0 0 @border-radius-base;
-    }
+    border-left: 1px solid @border-color-base;
+  }
+
+  &:last-child {
+    border-radius: 0 @border-radius-base @border-radius-base 0;
+  }
+
+  &:first-child:last-child {
+    border-radius: @border-radius-base;
+  }
+
+  &:hover,
+  &-focused {
+    color: @primary-color;
+    position: relative;
+  }
+
+  .@{radio-prefix-cls}-inner,
+  input {
+    .opacity(0);
+    width: 0;
+    height: 0;
+  }
+
+  &-checked {
+    background: #fff;
+    border-color: @primary-color;
+    color: @primary-color;
+    box-shadow: -1px 0 0 0 @primary-color;
 
-    &:hover,
+    &:first-child {
-    &-focused {
+      border-color: @primary-color;
-      color: @primary-color;
+      box-shadow: none!important;
-      position: relative;
     }
 
-    .@{radio-prefix-cls}-inner,
+    &:hover {
-    input {
+      border-color: tint(@primary-color, 20%);
-      .opacity(0);
+      box-shadow: -1px 0 0 0 tint(@primary-color, 20%);
-      width: 0;
+      color: tint(@primary-color, 20%);
-      height: 0;
     }
 
-    &-checked {
+    &:active {
-      background: #fff;
+      border-color: shade(@primary-color, 5%);
-      border-color: @primary-color;
+      box-shadow: -1px 0 0 0 shade(@primary-color, 5%);
-      color: @primary-color;
+      color: shade(@primary-color, 5%);
-      box-shadow: -1px 0 0 0 @primary-color;
-
-      &:first-child {
-        border-color: @primary-color;
-        box-shadow: none!important;
-      }
-
-      &:hover {
-        border-color: tint(@primary-color, 20%);
-        box-shadow: -1px 0 0 0 tint(@primary-color, 20%);
-        color: tint(@primary-color, 20%);
-      }
-
-      &:active {
-        border-color: shade(@primary-color, 5%);
-        box-shadow: -1px 0 0 0 shade(@primary-color, 5%);
-        color: shade(@primary-color, 5%);
-      }
     }
+  }
+
+  &-disabled {
+    border-color: @border-color-base;
+    background-color: #f7f7f7;
+    cursor: not-allowed;
+    color: #ccc;
 
-    &-disabled {
+    &:first-child,
+    &:hover {
       border-color: @border-color-base;
       background-color: #f7f7f7;
-      cursor: not-allowed;
       color: #ccc;
-
-      &:first-child,
-      &:hover {
-        border-color: @border-color-base;
-        background-color: #f7f7f7;
-        color: #ccc;
-      }
-      &:first-child {
-        border-left-color: @border-color-base;
-      }
     }
-
+    &:first-child {
-    &-disabled.@{radio-prefix-cls}-button-checked {
+      border-left-color: @border-color-base;
-      color: #fff;
-      background-color: #e6e6e6;
-      border-color: @border-color-base;
     }
   }
+
+  &-disabled&-checked {
+    color: #fff;
+    background-color: #e6e6e6;
+    border-color: @border-color-base;
+  }
 }