refactor: Remove duplicated less loop (#20590)

* refactor: Remove duplicated less loop

* update snapshot

* add more test case

components/auto-complete/__tests__/__snapshots__/demo.test.js.snap

@@ -170,7 +170,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
     class="ant-row ant-form-item"
   >
     <div
-      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
+      class="ant-col ant-form-item-label"
     >
       <label
         class=""
@@ -180,7 +180,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
       </label>
     </div>
     <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
+      class="ant-col ant-form-item-control"
     >
       <div
         class="ant-form-item-control-input"
@@ -218,7 +218,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
     class="ant-row ant-form-item"
   >
     <div
-      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
+      class="ant-col ant-form-item-label"
     >
       <label
         class=""
@@ -228,7 +228,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
       </label>
     </div>
     <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
+      class="ant-col ant-form-item-control"
     >
       <div
         class="ant-form-item-control-input"
@@ -295,7 +295,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
     class="ant-row ant-form-item"
   >
     <div
-      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
+      class="ant-col ant-form-item-label"
     >
       <label
         class=""
@@ -305,7 +305,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
       </label>
     </div>
     <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
+      class="ant-col ant-form-item-control"
     >
       <div
         class="ant-form-item-control-input"
@@ -403,7 +403,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
     class="ant-row ant-form-item"
   >
     <div
-      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
+      class="ant-col ant-form-item-label"
     >
       <label
         class=""
@@ -413,7 +413,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
       </label>
     </div>
     <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
+      class="ant-col ant-form-item-control"
     >
       <div
         class="ant-form-item-control-input"
@@ -480,7 +480,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
     class="ant-row ant-form-item"
   >
     <div
-      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
+      class="ant-col ant-form-item-label"
     >
       <label
         class=""
@@ -490,7 +490,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
       </label>
     </div>
     <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
+      class="ant-col ant-form-item-control"
     >
       <div
         class="ant-form-item-control-input"
@@ -617,7 +617,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
     class="ant-row ant-form-item"
   >
     <div
-      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
+      class="ant-col ant-form-item-label"
     >
       <label
         class=""
@@ -627,7 +627,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
       </label>
     </div>
     <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
+      class="ant-col ant-form-item-control"
     >
       <div
         class="ant-form-item-control-input"
@@ -755,7 +755,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
     class="ant-row ant-form-item"
   >
     <div
-      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
+      class="ant-col ant-form-item-label"
     >
       <label
         class=""
@@ -765,7 +765,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
       </label>
     </div>
     <div
-      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
+      class="ant-col ant-form-item-control"
     >
       <div
         class="ant-form-item-control-input"

components/auto-complete/__tests__/index.test.js

@@ -24,7 +24,12 @@ describe('AutoComplete with Custom Input Element Render', () => {
 
   it('AutoComplete should work when dataSource is object array', () => {
     const wrapper = mount(
-      <AutoComplete dataSource={[{ text: 'text', value: 'value' }, { text: 'abc', value: 'xxx' }]}>
+      <AutoComplete
+        dataSource={[
+          { text: 'text', value: 'value' },
+          { text: 'abc', value: 'xxx' },
+        ]}
+      >
         <input />
       </AutoComplete>,
     );

components/card/__tests__/__snapshots__/demo.test.js.snap

@@ -236,7 +236,7 @@ exports[`renders ./components/card/demo/in-column.md correctly 1`] = `
     style="margin-left:-8px;margin-right:-8px"
   >
     <div
-      class="ant-col ant-col-8"
+      class="ant-col ant-col-base-8"
       style="padding-left:8px;padding-right:8px"
     >
       <div
@@ -263,7 +263,7 @@ exports[`renders ./components/card/demo/in-column.md correctly 1`] = `
       </div>
     </div>
     <div
-      class="ant-col ant-col-8"
+      class="ant-col ant-col-base-8"
       style="padding-left:8px;padding-right:8px"
     >
       <div
@@ -290,7 +290,7 @@ exports[`renders ./components/card/demo/in-column.md correctly 1`] = `
       </div>
     </div>
     <div
-      class="ant-col ant-col-8"
+      class="ant-col ant-col-base-8"
       style="padding-left:8px;padding-right:8px"
     >
       <div
@@ -439,7 +439,7 @@ exports[`renders ./components/card/demo/loading.md correctly 1`] = `
           style="margin-left:-4px;margin-right:-4px"
         >
           <div
-            class="ant-col ant-col-22"
+            class="ant-col ant-col-base-22"
             style="padding-left:4px;padding-right:4px"
           >
             <div
@@ -452,7 +452,7 @@ exports[`renders ./components/card/demo/loading.md correctly 1`] = `
           style="margin-left:-4px;margin-right:-4px"
         >
           <div
-            class="ant-col ant-col-8"
+            class="ant-col ant-col-base-8"
             style="padding-left:4px;padding-right:4px"
           >
             <div
@@ -460,7 +460,7 @@ exports[`renders ./components/card/demo/loading.md correctly 1`] = `
             />
           </div>
           <div
-            class="ant-col ant-col-15"
+            class="ant-col ant-col-base-15"
             style="padding-left:4px;padding-right:4px"
           >
             <div
@@ -473,7 +473,7 @@ exports[`renders ./components/card/demo/loading.md correctly 1`] = `
           style="margin-left:-4px;margin-right:-4px"
         >
           <div
-            class="ant-col ant-col-6"
+            class="ant-col ant-col-base-6"
             style="padding-left:4px;padding-right:4px"
           >
             <div
@@ -481,7 +481,7 @@ exports[`renders ./components/card/demo/loading.md correctly 1`] = `
             />
           </div>
           <div
-            class="ant-col ant-col-18"
+            class="ant-col ant-col-base-18"
             style="padding-left:4px;padding-right:4px"
           >
             <div
@@ -494,7 +494,7 @@ exports[`renders ./components/card/demo/loading.md correctly 1`] = `
           style="margin-left:-4px;margin-right:-4px"
         >
           <div
-            class="ant-col ant-col-13"
+            class="ant-col ant-col-base-13"
             style="padding-left:4px;padding-right:4px"
           >
             <div
@@ -502,7 +502,7 @@ exports[`renders ./components/card/demo/loading.md correctly 1`] = `
             />
           </div>
           <div
-            class="ant-col ant-col-9"
+            class="ant-col ant-col-base-9"
             style="padding-left:4px;padding-right:4px"
           >
             <div
@@ -515,7 +515,7 @@ exports[`renders ./components/card/demo/loading.md correctly 1`] = `
           style="margin-left:-4px;margin-right:-4px"
         >
           <div
-            class="ant-col ant-col-4"
+            class="ant-col ant-col-base-4"
             style="padding-left:4px;padding-right:4px"
           >
             <div
@@ -523,7 +523,7 @@ exports[`renders ./components/card/demo/loading.md correctly 1`] = `
             />
           </div>
           <div
-            class="ant-col ant-col-3"
+            class="ant-col ant-col-base-3"
             style="padding-left:4px;padding-right:4px"
           >
             <div
@@ -531,7 +531,7 @@ exports[`renders ./components/card/demo/loading.md correctly 1`] = `
             />
           </div>
           <div
-            class="ant-col ant-col-16"
+            class="ant-col ant-col-base-16"
             style="padding-left:4px;padding-right:4px"
           >
             <div

components/card/__tests__/__snapshots__/index.test.js.snap

@@ -27,7 +27,7 @@ exports[`Card should still have padding when card which set padding to 0 is load
         style="margin-left: -4px; margin-right: -4px;"
       >
         <div
-          class="ant-col ant-col-22"
+          class="ant-col ant-col-base-22"
           style="padding-left: 4px; padding-right: 4px;"
         >
           <div
@@ -40,7 +40,7 @@ exports[`Card should still have padding when card which set padding to 0 is load
         style="margin-left: -4px; margin-right: -4px;"
       >
         <div
-          class="ant-col ant-col-8"
+          class="ant-col ant-col-base-8"
           style="padding-left: 4px; padding-right: 4px;"
         >
           <div
@@ -48,7 +48,7 @@ exports[`Card should still have padding when card which set padding to 0 is load
           />
         </div>
         <div
-          class="ant-col ant-col-15"
+          class="ant-col ant-col-base-15"
           style="padding-left: 4px; padding-right: 4px;"
         >
           <div
@@ -61,7 +61,7 @@ exports[`Card should still have padding when card which set padding to 0 is load
         style="margin-left: -4px; margin-right: -4px;"
       >
         <div
-          class="ant-col ant-col-6"
+          class="ant-col ant-col-base-6"
           style="padding-left: 4px; padding-right: 4px;"
         >
           <div
@@ -69,7 +69,7 @@ exports[`Card should still have padding when card which set padding to 0 is load
           />
         </div>
         <div
-          class="ant-col ant-col-18"
+          class="ant-col ant-col-base-18"
           style="padding-left: 4px; padding-right: 4px;"
         >
           <div
@@ -82,7 +82,7 @@ exports[`Card should still have padding when card which set padding to 0 is load
         style="margin-left: -4px; margin-right: -4px;"
       >
         <div
-          class="ant-col ant-col-13"
+          class="ant-col ant-col-base-13"
           style="padding-left: 4px; padding-right: 4px;"
         >
           <div
@@ -90,7 +90,7 @@ exports[`Card should still have padding when card which set padding to 0 is load
           />
         </div>
         <div
-          class="ant-col ant-col-9"
+          class="ant-col ant-col-base-9"
           style="padding-left: 4px; padding-right: 4px;"
         >
           <div
@@ -103,7 +103,7 @@ exports[`Card should still have padding when card which set padding to 0 is load
         style="margin-left: -4px; margin-right: -4px;"
       >
         <div
-          class="ant-col ant-col-4"
+          class="ant-col ant-col-base-4"
           style="padding-left: 4px; padding-right: 4px;"
         >
           <div
@@ -111,7 +111,7 @@ exports[`Card should still have padding when card which set padding to 0 is load
           />
         </div>
         <div
-          class="ant-col ant-col-3"
+          class="ant-col ant-col-base-3"
           style="padding-left: 4px; padding-right: 4px;"
         >
           <div
@@ -119,7 +119,7 @@ exports[`Card should still have padding when card which set padding to 0 is load
           />
         </div>
         <div
-          class="ant-col ant-col-16"
+          class="ant-col ant-col-base-16"
           style="padding-left: 4px; padding-right: 4px;"
         >
           <div

components/checkbox/__tests__/__snapshots__/demo.test.js.snap

@@ -405,7 +405,7 @@ exports[`renders ./components/checkbox/demo/layout.md correctly 1`] = `
     class="ant-row"
   >
     <div
-      class="ant-col ant-col-8"
+      class="ant-col ant-col-base-8"
     >
       <label
         class="ant-checkbox-wrapper"
@@ -428,7 +428,7 @@ exports[`renders ./components/checkbox/demo/layout.md correctly 1`] = `
       </label>
     </div>
     <div
-      class="ant-col ant-col-8"
+      class="ant-col ant-col-base-8"
     >
       <label
         class="ant-checkbox-wrapper"
@@ -451,7 +451,7 @@ exports[`renders ./components/checkbox/demo/layout.md correctly 1`] = `
       </label>
     </div>
     <div
-      class="ant-col ant-col-8"
+      class="ant-col ant-col-base-8"
     >
       <label
         class="ant-checkbox-wrapper"
@@ -474,7 +474,7 @@ exports[`renders ./components/checkbox/demo/layout.md correctly 1`] = `
       </label>
     </div>
     <div
-      class="ant-col ant-col-8"
+      class="ant-col ant-col-base-8"
     >
       <label
         class="ant-checkbox-wrapper"
@@ -497,7 +497,7 @@ exports[`renders ./components/checkbox/demo/layout.md correctly 1`] = `
       </label>
     </div>
     <div
-      class="ant-col ant-col-8"
+      class="ant-col ant-col-base-8"
     >
       <label
         class="ant-checkbox-wrapper"

components/checkbox/__tests__/group.test.js

@@ -38,7 +38,10 @@ describe('CheckboxGroup', () => {
   it('does not trigger onChange callback of both Checkbox and CheckboxGroup when CheckboxGroup is disabled', () => {
     const onChangeGroup = jest.fn();
 
-    const options = [{ label: 'Apple', value: 'Apple' }, { label: 'Pear', value: 'Pear' }];
+    const options = [
+      { label: 'Apple', value: 'Apple' },
+      { label: 'Pear', value: 'Pear' },
+    ];
 
     const groupWrapper = mount(
       <Checkbox.Group options={options} onChange={onChangeGroup} disabled />,
@@ -84,7 +87,10 @@ describe('CheckboxGroup', () => {
   });
 
   it('passes prefixCls down to checkbox', () => {
-    const options = [{ label: 'Apple', value: 'Apple' }, { label: 'Orange', value: 'Orange' }];
+    const options = [
+      { label: 'Apple', value: 'Apple' },
+      { label: 'Orange', value: 'Orange' },
+    ];
 
     const wrapper = render(<Checkbox.Group prefixCls="my-checkbox" options={options} />);
 
@@ -92,7 +98,10 @@ describe('CheckboxGroup', () => {
   });
 
   it('should be controlled by value', () => {
-    const options = [{ label: 'Apple', value: 'Apple' }, { label: 'Orange', value: 'Orange' }];
+    const options = [
+      { label: 'Apple', value: 'Apple' },
+      { label: 'Orange', value: 'Orange' },
+    ];
 
     const wrapper = mount(<Checkbox.Group options={options} />);
 

components/config-provider/__tests__/__snapshots__/components.test.js.snap

@@ -6839,7 +6839,7 @@ exports[`ConfigProvider components Grid configProvider 1`] = `
   class="config-row"
 >
   <div
-    class="config-col config-col-1"
+    class="config-col config-col-base-1"
   />
 </div>
 `;
@@ -6849,7 +6849,7 @@ exports[`ConfigProvider components Grid normal 1`] = `
   class="ant-row"
 >
   <div
-    class="ant-col ant-col-1"
+    class="ant-col ant-col-base-1"
   />
 </div>
 `;
@@ -6859,7 +6859,7 @@ exports[`ConfigProvider components Grid prefixCls 1`] = `
   class="prefix-row"
 >
   <div
-    class="prefix-col prefix-col-1"
+    class="prefix-col prefix-col-base-1"
   />
 </div>
 `;

components/grid/RowContext.tsx

@@ -1,6 +1,8 @@
 import { createContext, Context } from 'react';
+import { BreakpointMap } from '../_util/responsiveObserve';
 
 export interface RowContextState {
+  screens?: BreakpointMap;
   gutter?: [number, number];
 }
 

components/grid/__tests__/__snapshots__/demo.test.js.snap

@@ -6,7 +6,7 @@ exports[`renders ./components/grid/demo/basic.md correctly 1`] = `
     class="ant-row"
   >
     <div
-      class="ant-col ant-col-24"
+      class="ant-col ant-col-base-24"
     >
       col
     </div>
@@ -15,12 +15,12 @@ exports[`renders ./components/grid/demo/basic.md correctly 1`] = `
     class="ant-row"
   >
     <div
-      class="ant-col ant-col-12"
+      class="ant-col ant-col-base-12"
     >
       col-12
     </div>
     <div
-      class="ant-col ant-col-12"
+      class="ant-col ant-col-base-12"
     >
       col-12
     </div>
@@ -29,17 +29,17 @@ exports[`renders ./components/grid/demo/basic.md correctly 1`] = `
     class="ant-row"
   >
     <div
-      class="ant-col ant-col-8"
+      class="ant-col ant-col-base-8"
     >
       col-8
     </div>
     <div
-      class="ant-col ant-col-8"
+      class="ant-col ant-col-base-8"
     >
       col-8
     </div>
     <div
-      class="ant-col ant-col-8"
+      class="ant-col ant-col-base-8"
     >
       col-8
     </div>
@@ -48,22 +48,22 @@ exports[`renders ./components/grid/demo/basic.md correctly 1`] = `
     class="ant-row"
   >
     <div
-      class="ant-col ant-col-6"
+      class="ant-col ant-col-base-6"
     >
       col-6
     </div>
     <div
-      class="ant-col ant-col-6"
+      class="ant-col ant-col-base-6"
     >
       col-6
     </div>
     <div
-      class="ant-col ant-col-6"
+      class="ant-col ant-col-base-6"
     >
       col-6
     </div>
     <div
-      class="ant-col ant-col-6"
+      class="ant-col ant-col-base-6"
     >
       col-6
     </div>
@@ -80,22 +80,22 @@ exports[`renders ./components/grid/demo/flex.md correctly 1`] = `
     class="ant-row ant-row-start"
   >
     <div
-      class="ant-col ant-col-4"
+      class="ant-col ant-col-base-4"
     >
       col-4
     </div>
     <div
-      class="ant-col ant-col-4"
+      class="ant-col ant-col-base-4"
     >
       col-4
     </div>
     <div
-      class="ant-col ant-col-4"
+      class="ant-col ant-col-base-4"
     >
       col-4
     </div>
     <div
-      class="ant-col ant-col-4"
+      class="ant-col ant-col-base-4"
     >
       col-4
     </div>
@@ -107,22 +107,22 @@ exports[`renders ./components/grid/demo/flex.md correctly 1`] = `
     class="ant-row ant-row-center"
   >
     <div
-      class="ant-col ant-col-4"
+      class="ant-col ant-col-base-4"
     >
       col-4
     </div>
     <div
-      class="ant-col ant-col-4"
+      class="ant-col ant-col-base-4"
     >
       col-4
     </div>
     <div
-      class="ant-col ant-col-4"
+      class="ant-col ant-col-base-4"
     >
       col-4
     </div>
     <div
-      class="ant-col ant-col-4"
+      class="ant-col ant-col-base-4"
     >
       col-4
     </div>
@@ -134,22 +134,22 @@ exports[`renders ./components/grid/demo/flex.md correctly 1`] = `
     class="ant-row ant-row-end"
   >
     <div
-      class="ant-col ant-col-4"
+      class="ant-col ant-col-base-4"
     >
       col-4
     </div>
     <div
-      class="ant-col ant-col-4"
+      class="ant-col ant-col-base-4"
     >
       col-4
     </div>
     <div
-      class="ant-col ant-col-4"
+      class="ant-col ant-col-base-4"
     >
       col-4
     </div>
     <div
-      class="ant-col ant-col-4"
+      class="ant-col ant-col-base-4"
     >
       col-4
     </div>
@@ -161,22 +161,22 @@ exports[`renders ./components/grid/demo/flex.md correctly 1`] = `
     class="ant-row ant-row-space-between"
   >
     <div
-      class="ant-col ant-col-4"
+      class="ant-col ant-col-base-4"
     >
       col-4
     </div>
     <div
-      class="ant-col ant-col-4"
+      class="ant-col ant-col-base-4"
     >
       col-4
     </div>
     <div
-      class="ant-col ant-col-4"
+      class="ant-col ant-col-base-4"
     >
       col-4
     </div>
     <div
-      class="ant-col ant-col-4"
+      class="ant-col ant-col-base-4"
     >
       col-4
     </div>
@@ -188,22 +188,22 @@ exports[`renders ./components/grid/demo/flex.md correctly 1`] = `
     class="ant-row ant-row-space-around"
   >
     <div
-      class="ant-col ant-col-4"
+      class="ant-col ant-col-base-4"
     >
       col-4
     </div>
     <div
-      class="ant-col ant-col-4"
+      class="ant-col ant-col-base-4"
     >
       col-4
     </div>
     <div
-      class="ant-col ant-col-4"
+      class="ant-col ant-col-base-4"
     >
       col-4
     </div>
     <div
-      class="ant-col ant-col-4"
+      class="ant-col ant-col-base-4"
     >
       col-4
     </div>
@@ -220,7 +220,7 @@ exports[`renders ./components/grid/demo/flex-align.md correctly 1`] = `
     class="ant-row ant-row-center ant-row-top"
   >
     <div
-      class="ant-col ant-col-4"
+      class="ant-col ant-col-base-4"
     >
       <p
         class="height-100"
@@ -229,7 +229,7 @@ exports[`renders ./components/grid/demo/flex-align.md correctly 1`] = `
       </p>
     </div>
     <div
-      class="ant-col ant-col-4"
+      class="ant-col ant-col-base-4"
     >
       <p
         class="height-50"
@@ -238,7 +238,7 @@ exports[`renders ./components/grid/demo/flex-align.md correctly 1`] = `
       </p>
     </div>
     <div
-      class="ant-col ant-col-4"
+      class="ant-col ant-col-base-4"
     >
       <p
         class="height-120"
@@ -247,7 +247,7 @@ exports[`renders ./components/grid/demo/flex-align.md correctly 1`] = `
       </p>
     </div>
     <div
-      class="ant-col ant-col-4"
+      class="ant-col ant-col-base-4"
     >
       <p
         class="height-80"
@@ -263,7 +263,7 @@ exports[`renders ./components/grid/demo/flex-align.md correctly 1`] = `
     class="ant-row ant-row-space-around ant-row-middle"
   >
     <div
-      class="ant-col ant-col-4"
+      class="ant-col ant-col-base-4"
     >
       <p
         class="height-100"
@@ -272,7 +272,7 @@ exports[`renders ./components/grid/demo/flex-align.md correctly 1`] = `
       </p>
     </div>
     <div
-      class="ant-col ant-col-4"
+      class="ant-col ant-col-base-4"
     >
       <p
         class="height-50"
@@ -281,7 +281,7 @@ exports[`renders ./components/grid/demo/flex-align.md correctly 1`] = `
       </p>
     </div>
     <div
-      class="ant-col ant-col-4"
+      class="ant-col ant-col-base-4"
     >
       <p
         class="height-120"
@@ -290,7 +290,7 @@ exports[`renders ./components/grid/demo/flex-align.md correctly 1`] = `
       </p>
     </div>
     <div
-      class="ant-col ant-col-4"
+      class="ant-col ant-col-base-4"
     >
       <p
         class="height-80"
@@ -306,7 +306,7 @@ exports[`renders ./components/grid/demo/flex-align.md correctly 1`] = `
     class="ant-row ant-row-space-between ant-row-bottom"
   >
     <div
-      class="ant-col ant-col-4"
+      class="ant-col ant-col-base-4"
     >
       <p
         class="height-100"
@@ -315,7 +315,7 @@ exports[`renders ./components/grid/demo/flex-align.md correctly 1`] = `
       </p>
     </div>
     <div
-      class="ant-col ant-col-4"
+      class="ant-col ant-col-base-4"
     >
       <p
         class="height-50"
@@ -324,7 +324,7 @@ exports[`renders ./components/grid/demo/flex-align.md correctly 1`] = `
       </p>
     </div>
     <div
-      class="ant-col ant-col-4"
+      class="ant-col ant-col-base-4"
     >
       <p
         class="height-120"
@@ -333,7 +333,7 @@ exports[`renders ./components/grid/demo/flex-align.md correctly 1`] = `
       </p>
     </div>
     <div
-      class="ant-col ant-col-4"
+      class="ant-col ant-col-base-4"
     >
       <p
         class="height-80"
@@ -351,22 +351,22 @@ exports[`renders ./components/grid/demo/flex-order.md correctly 1`] = `
     class="ant-row"
   >
     <div
-      class="ant-col ant-col-6 ant-col-order-4"
+      class="ant-col ant-col-base-6 ant-col-base-order-4"
     >
       1 col-order-4
     </div>
     <div
-      class="ant-col ant-col-6 ant-col-order-3"
+      class="ant-col ant-col-base-6 ant-col-base-order-3"
     >
       2 col-order-3
     </div>
     <div
-      class="ant-col ant-col-6 ant-col-order-2"
+      class="ant-col ant-col-base-6 ant-col-base-order-2"
     >
       3 col-order-2
     </div>
     <div
-      class="ant-col ant-col-6 ant-col-order-1"
+      class="ant-col ant-col-base-6 ant-col-base-order-1"
     >
       4 col-order-1
     </div>
@@ -445,7 +445,7 @@ exports[`renders ./components/grid/demo/gutter.md correctly 1`] = `
     style="margin-left:-8px;margin-right:-8px"
   >
     <div
-      class="ant-col ant-col-6 gutter-row"
+      class="ant-col gutter-row ant-col-base-6"
       style="padding-left:8px;padding-right:8px"
     >
       <div
@@ -455,7 +455,7 @@ exports[`renders ./components/grid/demo/gutter.md correctly 1`] = `
       </div>
     </div>
     <div
-      class="ant-col ant-col-6 gutter-row"
+      class="ant-col gutter-row ant-col-base-6"
       style="padding-left:8px;padding-right:8px"
     >
       <div
@@ -465,7 +465,7 @@ exports[`renders ./components/grid/demo/gutter.md correctly 1`] = `
       </div>
     </div>
     <div
-      class="ant-col ant-col-6 gutter-row"
+      class="ant-col gutter-row ant-col-base-6"
       style="padding-left:8px;padding-right:8px"
     >
       <div
@@ -475,7 +475,7 @@ exports[`renders ./components/grid/demo/gutter.md correctly 1`] = `
       </div>
     </div>
     <div
-      class="ant-col ant-col-6 gutter-row"
+      class="ant-col gutter-row ant-col-base-6"
       style="padding-left:8px;padding-right:8px"
     >
       <div
@@ -490,7 +490,7 @@ exports[`renders ./components/grid/demo/gutter.md correctly 1`] = `
     style="margin-top:-10px;margin-bottom:10px"
   >
     <div
-      class="ant-col ant-col-6 gutter-row"
+      class="ant-col gutter-row ant-col-base-6"
       style="padding-top:10px;padding-bottom:10px"
     >
       <div
@@ -500,7 +500,7 @@ exports[`renders ./components/grid/demo/gutter.md correctly 1`] = `
       </div>
     </div>
     <div
-      class="ant-col ant-col-6 gutter-row"
+      class="ant-col gutter-row ant-col-base-6"
       style="padding-top:10px;padding-bottom:10px"
     >
       <div
@@ -510,7 +510,7 @@ exports[`renders ./components/grid/demo/gutter.md correctly 1`] = `
       </div>
     </div>
     <div
-      class="ant-col ant-col-6 gutter-row"
+      class="ant-col gutter-row ant-col-base-6"
       style="padding-top:10px;padding-bottom:10px"
     >
       <div
@@ -520,7 +520,7 @@ exports[`renders ./components/grid/demo/gutter.md correctly 1`] = `
       </div>
     </div>
     <div
-      class="ant-col ant-col-6 gutter-row"
+      class="ant-col gutter-row ant-col-base-6"
       style="padding-top:10px;padding-bottom:10px"
     >
       <div
@@ -539,12 +539,12 @@ exports[`renders ./components/grid/demo/offset.md correctly 1`] = `
     class="ant-row"
   >
     <div
-      class="ant-col ant-col-8"
+      class="ant-col ant-col-base-8"
     >
       col-8
     </div>
     <div
-      class="ant-col ant-col-8 ant-col-offset-8"
+      class="ant-col ant-col-base-8 ant-col-base-offset-8"
     >
       col-8
     </div>
@@ -553,12 +553,12 @@ exports[`renders ./components/grid/demo/offset.md correctly 1`] = `
     class="ant-row"
   >
     <div
-      class="ant-col ant-col-6 ant-col-offset-6"
+      class="ant-col ant-col-base-6 ant-col-base-offset-6"
     >
       col-6 col-offset-6
     </div>
     <div
-      class="ant-col ant-col-6 ant-col-offset-6"
+      class="ant-col ant-col-base-6 ant-col-base-offset-6"
     >
       col-6 col-offset-6
     </div>
@@ -567,7 +567,7 @@ exports[`renders ./components/grid/demo/offset.md correctly 1`] = `
     class="ant-row"
   >
     <div
-      class="ant-col ant-col-12 ant-col-offset-6"
+      class="ant-col ant-col-base-12 ant-col-base-offset-6"
     >
       col-12 col-offset-6
     </div>
@@ -880,7 +880,7 @@ exports[`renders ./components/grid/demo/playground.md correctly 1`] = `
     style="margin-left:-8px;margin-right:-8px;margin-top:-8px;margin-bottom:8px"
   >
     <div
-      class="ant-col ant-col-6"
+      class="ant-col ant-col-base-6"
       style="padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px"
     >
       <div>
@@ -888,7 +888,7 @@ exports[`renders ./components/grid/demo/playground.md correctly 1`] = `
       </div>
     </div>
     <div
-      class="ant-col ant-col-6"
+      class="ant-col ant-col-base-6"
       style="padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px"
     >
       <div>
@@ -896,7 +896,7 @@ exports[`renders ./components/grid/demo/playground.md correctly 1`] = `
       </div>
     </div>
     <div
-      class="ant-col ant-col-6"
+      class="ant-col ant-col-base-6"
       style="padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px"
     >
       <div>
@@ -904,7 +904,7 @@ exports[`renders ./components/grid/demo/playground.md correctly 1`] = `
       </div>
     </div>
     <div
-      class="ant-col ant-col-6"
+      class="ant-col ant-col-base-6"
       style="padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px"
     >
       <div>
@@ -917,7 +917,7 @@ exports[`renders ./components/grid/demo/playground.md correctly 1`] = `
     style="margin-left:-8px;margin-right:-8px;margin-top:-8px;margin-bottom:8px"
   >
     <div
-      class="ant-col ant-col-6"
+      class="ant-col ant-col-base-6"
       style="padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px"
     >
       <div>
@@ -925,7 +925,7 @@ exports[`renders ./components/grid/demo/playground.md correctly 1`] = `
       </div>
     </div>
     <div
-      class="ant-col ant-col-6"
+      class="ant-col ant-col-base-6"
       style="padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px"
     >
       <div>
@@ -933,7 +933,7 @@ exports[`renders ./components/grid/demo/playground.md correctly 1`] = `
       </div>
     </div>
     <div
-      class="ant-col ant-col-6"
+      class="ant-col ant-col-base-6"
       style="padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px"
     >
       <div>
@@ -941,7 +941,7 @@ exports[`renders ./components/grid/demo/playground.md correctly 1`] = `
       </div>
     </div>
     <div
-      class="ant-col ant-col-6"
+      class="ant-col ant-col-base-6"
       style="padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px"
     >
       <div>
@@ -973,17 +973,17 @@ exports[`renders ./components/grid/demo/responsive.md correctly 1`] = `
   class="ant-row"
 >
   <div
-    class="ant-col ant-col-xs-2 ant-col-sm-4 ant-col-md-6 ant-col-lg-8 ant-col-xl-10"
+    class="ant-col"
   >
     Col
   </div>
   <div
-    class="ant-col ant-col-xs-20 ant-col-sm-16 ant-col-md-12 ant-col-lg-8 ant-col-xl-4"
+    class="ant-col"
   >
     Col
   </div>
   <div
-    class="ant-col ant-col-xs-2 ant-col-sm-4 ant-col-md-6 ant-col-lg-8 ant-col-xl-10"
+    class="ant-col"
   >
     Col
   </div>
@@ -995,17 +995,17 @@ exports[`renders ./components/grid/demo/responsive-more.md correctly 1`] = `
   class="ant-row"
 >
   <div
-    class="ant-col ant-col-xs-5 ant-col-xs-offset-1 ant-col-lg-6 ant-col-lg-offset-2"
+    class="ant-col"
   >
     Col
   </div>
   <div
-    class="ant-col ant-col-xs-11 ant-col-xs-offset-1 ant-col-lg-6 ant-col-lg-offset-2"
+    class="ant-col"
   >
     Col
   </div>
   <div
-    class="ant-col ant-col-xs-5 ant-col-xs-offset-1 ant-col-lg-6 ant-col-lg-offset-2"
+    class="ant-col"
   >
     Col
   </div>
@@ -1018,12 +1018,12 @@ exports[`renders ./components/grid/demo/sort.md correctly 1`] = `
     class="ant-row"
   >
     <div
-      class="ant-col ant-col-18 ant-col-push-6"
+      class="ant-col ant-col-base-18 ant-col-base-push-6"
     >
       col-18 col-push-6
     </div>
     <div
-      class="ant-col ant-col-6 ant-col-pull-18"
+      class="ant-col ant-col-base-6 ant-col-base-pull-18"
     >
       col-6 col-pull-18
     </div>

components/grid/__tests__/__snapshots__/index.test.js.snap

@@ -7,12 +7,12 @@ exports[`Grid renders wrapped Col correctly 1`] = `
 >
   <div>
     <div
-      class="ant-col ant-col-12"
+      class="ant-col ant-col-base-12"
       style="padding-left:10px;padding-right:10px"
     />
   </div>
   <div
-    class="ant-col ant-col-12"
+    class="ant-col ant-col-base-12"
     style="padding-left:10px;padding-right:10px"
   />
 </div>
@@ -32,7 +32,7 @@ exports[`Grid rtl render component should be rendered correctly in RTL direction
 
 exports[`Grid should render Col 1`] = `
 <div
-  class="ant-col ant-col-2"
+  class="ant-col ant-col-base-2"
 />
 `;
 

components/grid/__tests__/index.test.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { render, mount } from 'enzyme';
 import { Col, Row } from '..';
 import mountTest from '../../../tests/shared/mountTest';
+import { getScreenClassNames } from '../col';
 import rtlTest from '../../../tests/shared/rtlTest';
 
 describe('Grid', () => {
@@ -90,4 +91,18 @@ describe('Grid', () => {
       marginBottom: 10,
     });
   });
+
+  it('should use best match responsive', () => {
+    expect(
+      getScreenClassNames(
+        'test',
+        { sm: true, xl: true },
+        {
+          span: 1,
+          sm: 2,
+          xl: 3,
+        },
+      ),
+    ).toEqual('test-base-3');
+  });
 });

components/grid/col.tsx

@@ -1,7 +1,10 @@
 import * as React from 'react';
 import classNames from 'classnames';
+import omit from 'omit.js';
 import RowContext from './RowContext';
 import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
+import { tuple } from '../_util/type';
+import { BreakpointMap } from '../_util/responsiveObserve';
 
 // https://github.com/ant-design/ant-design/issues/14324
 type ColSpanType = number | string;
@@ -44,63 +47,55 @@ function parseFlex(flex: FlexType): string {
   return flex;
 }
 
+const RESPONSIVE_LIST = ['xxl', 'xl', 'lg', 'md', 'sm', 'xs'];
+
+const ResponsiveTypes = tuple('xxl', 'xl', 'lg', 'md', 'sm', 'xs');
+export type ResponsiveType = typeof ResponsiveTypes[number];
+
+export function getScreenClassNames(
+  prefixCls: string,
+  screens: BreakpointMap,
+  { span, order, offset, push, pull, ...restProps }: ColProps,
+) {
+  let mergedScreenObj: ColSize = {
+    span,
+    order,
+    offset,
+    push,
+    pull,
+  };
+
+  for (let i = 0; i < RESPONSIVE_LIST.length; i += 1) {
+    const screen = RESPONSIVE_LIST[i] as ResponsiveType;
+    const screenObj = restProps[screen];
+    if (screens[screen] && screenObj !== undefined) {
+      mergedScreenObj = typeof screenObj === 'object' ? screenObj : { span: screenObj };
+      break;
+    }
+  }
+
+  return classNames({
+    [`${prefixCls}-base-${mergedScreenObj.span}`]: mergedScreenObj.span !== undefined,
+    [`${prefixCls}-base-order-${mergedScreenObj.order}`]: mergedScreenObj.order !== undefined,
+    [`${prefixCls}-base-offset-${mergedScreenObj.offset}`]: mergedScreenObj.offset !== undefined,
+    [`${prefixCls}-base-push-${mergedScreenObj.push}`]: mergedScreenObj.push !== undefined,
+    [`${prefixCls}-base-pull-${mergedScreenObj.pull}`]: mergedScreenObj.pull !== undefined,
+  });
+}
+
 export default class Col extends React.Component<ColProps, {}> {
   renderCol = ({ getPrefixCls, direction }: ConfigConsumerProps) => {
     const { props } = this;
-    const {
-      prefixCls: customizePrefixCls,
-      span,
-      order,
-      offset,
-      push,
-      pull,
-      className,
-      children,
-      flex,
-      style,
-      ...others
-    } = props;
+    const { prefixCls: customizePrefixCls, className, children, flex, style, ...others } = props;
     const prefixCls = getPrefixCls('col', customizePrefixCls);
-    let sizeClassObj = {};
-    ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].forEach(size => {
-      let sizeProps: ColSize = {};
-      const propSize = (props as any)[size];
-      if (typeof propSize === 'number') {
-        sizeProps.span = propSize;
-      } else if (typeof propSize === 'object') {
-        sizeProps = propSize || {};
-      }
-
-      delete (others as any)[size];
-
-      sizeClassObj = {
-        ...sizeClassObj,
-        [`${prefixCls}-${size}-${sizeProps.span}`]: sizeProps.span !== undefined,
-        [`${prefixCls}-${size}-order-${sizeProps.order}`]: sizeProps.order || sizeProps.order === 0,
-        [`${prefixCls}-${size}-offset-${sizeProps.offset}`]:
-          sizeProps.offset || sizeProps.offset === 0,
-        [`${prefixCls}-${size}-push-${sizeProps.push}`]: sizeProps.push || sizeProps.push === 0,
-        [`${prefixCls}-${size}-pull-${sizeProps.pull}`]: sizeProps.pull || sizeProps.pull === 0,
-        [`${prefixCls}-rtl`]: direction === 'rtl',
-      };
-    });
-    const classes = classNames(
-      prefixCls,
-      {
-        [`${prefixCls}-${span}`]: span !== undefined,
-        [`${prefixCls}-order-${order}`]: order,
-        [`${prefixCls}-offset-${offset}`]: offset,
-        [`${prefixCls}-push-${push}`]: push,
-        [`${prefixCls}-pull-${pull}`]: pull,
-      },
-      className,
-      sizeClassObj,
-    );
+    const restProps = omit(others, [...RESPONSIVE_LIST, 'span', 'order', 'offset', 'push', 'pull']);
 
     return (
       <RowContext.Consumer>
-        {({ gutter }) => {
+        {({ gutter, screens = {} }) => {
           let mergedStyle: React.CSSProperties = { ...style };
+          const screenClassNames = getScreenClassNames(prefixCls, screens, this.props);
+
           if (gutter) {
             mergedStyle = {
               ...(gutter[0]! > 0
@@ -123,7 +118,13 @@ export default class Col extends React.Component<ColProps, {}> {
           }
 
           return (
-            <div {...others} style={mergedStyle} className={classes}>
+            <div
+              {...restProps}
+              style={mergedStyle}
+              className={classNames(prefixCls, className, screenClassNames, {
+                [`${prefixCls}-rtl`]: direction === 'rtl',
+              })}
+            >
               {children}
             </div>
           );

components/grid/row.tsx

@@ -37,13 +37,7 @@ export default class Row extends React.Component<RowProps, RowState> {
 
   componentDidMount() {
     this.token = ResponsiveObserve.subscribe(screens => {
-      const { gutter } = this.props;
-      if (
-        typeof gutter === 'object' ||
-        (Array.isArray(gutter) && (typeof gutter[0] === 'object' || typeof gutter[1] === 'object'))
-      ) {
-        this.setState({ screens });
-      }
+      this.setState({ screens });
     });
   }
 
@@ -73,6 +67,7 @@ export default class Row extends React.Component<RowProps, RowState> {
   }
 
   renderRow = ({ getPrefixCls, direction }: ConfigConsumerProps) => {
+    const { screens } = this.state;
     const {
       prefixCls: customizePrefixCls,
       justify,
@@ -112,7 +107,7 @@ export default class Row extends React.Component<RowProps, RowState> {
     delete otherProps.gutter;
 
     return (
-      <RowContext.Provider value={{ gutter }}>
+      <RowContext.Provider value={{ screens, gutter }}>
         <div {...otherProps} className={classes} style={rowStyle}>
           {children}
         </div>

components/grid/style/index.less

@@ -69,52 +69,6 @@
   }
 }
 
-.make-grid();
-
-// Extra small grid
-//
-// Columns, offsets, pushes, and pulls for extra small devices like
-// smartphones.
-
-.make-grid(-xs);
-
-// Small grid
-//
-// Columns, offsets, pushes, and pulls for the small device range, from phones
-// to tablets.
-
-@media (min-width: @screen-sm-min) {
-  .make-grid(-sm);
-}
-
-// Medium grid
-//
-// Columns, offsets, pushes, and pulls for the desktop device range.
-
-@media (min-width: @screen-md-min) {
-  .make-grid(-md);
-}
-
-// Large grid
-//
-// Columns, offsets, pushes, and pulls for the large desktop device range.
-
-@media (min-width: @screen-lg-min) {
-  .make-grid(-lg);
-}
-
-// Extra Large grid
-//
-// Columns, offsets, pushes, and pulls for the full hd device range.
-
-@media (min-width: @screen-xl-min) {
-  .make-grid(-xl);
-}
-
-// Extra Extra Large grid
-//
-// Columns, offsets, pushes, and pulls for the full hd device range.
-
-@media (min-width: @screen-xxl-min) {
-  .make-grid(-xxl);
-}
+// After antd v4, we only generate one grid layout
+// since modern browser already support media query that we can reuse className
+.make-grid(-base);

components/input/__tests__/__snapshots__/demo.test.js.snap

@@ -956,7 +956,7 @@ exports[`renders ./components/input/demo/group.md correctly 1`] = `
       style="margin-left:-4px;margin-right:-4px"
     >
       <div
-        class="ant-col ant-col-5"
+        class="ant-col ant-col-base-5"
         style="padding-left:4px;padding-right:4px"
       >
         <input
@@ -966,7 +966,7 @@ exports[`renders ./components/input/demo/group.md correctly 1`] = `
         />
       </div>
       <div
-        class="ant-col ant-col-8"
+        class="ant-col ant-col-base-8"
         style="padding-left:4px;padding-right:4px"
       >
         <input

components/list/__tests__/__snapshots__/demo.test.js.snap

@@ -182,7 +182,7 @@ exports[`renders ./components/list/demo/grid.md correctly 1`] = `
         style="margin-left:-8px;margin-right:-8px"
       >
         <div
-          class="ant-col ant-col-6"
+          class="ant-col ant-col-base-6"
           style="padding-left:8px;padding-right:8px"
         >
           <div
@@ -213,7 +213,7 @@ exports[`renders ./components/list/demo/grid.md correctly 1`] = `
           </div>
         </div>
         <div
-          class="ant-col ant-col-6"
+          class="ant-col ant-col-base-6"
           style="padding-left:8px;padding-right:8px"
         >
           <div
@@ -244,7 +244,7 @@ exports[`renders ./components/list/demo/grid.md correctly 1`] = `
           </div>
         </div>
         <div
-          class="ant-col ant-col-6"
+          class="ant-col ant-col-base-6"
           style="padding-left:8px;padding-right:8px"
         >
           <div
@@ -275,7 +275,7 @@ exports[`renders ./components/list/demo/grid.md correctly 1`] = `
           </div>
         </div>
         <div
-          class="ant-col ant-col-6"
+          class="ant-col ant-col-base-6"
           style="padding-left:8px;padding-right:8px"
         >
           <div
@@ -451,7 +451,7 @@ exports[`renders ./components/list/demo/resposive.md correctly 1`] = `
         style="margin-left:-8px;margin-right:-8px"
       >
         <div
-          class="ant-col ant-col-xs-24 ant-col-sm-12 ant-col-md-6 ant-col-lg-6 ant-col-xl-4 ant-col-xxl-8"
+          class="ant-col"
           style="padding-left:8px;padding-right:8px"
         >
           <div
@@ -482,7 +482,7 @@ exports[`renders ./components/list/demo/resposive.md correctly 1`] = `
           </div>
         </div>
         <div
-          class="ant-col ant-col-xs-24 ant-col-sm-12 ant-col-md-6 ant-col-lg-6 ant-col-xl-4 ant-col-xxl-8"
+          class="ant-col"
           style="padding-left:8px;padding-right:8px"
         >
           <div
@@ -513,7 +513,7 @@ exports[`renders ./components/list/demo/resposive.md correctly 1`] = `
           </div>
         </div>
         <div
-          class="ant-col ant-col-xs-24 ant-col-sm-12 ant-col-md-6 ant-col-lg-6 ant-col-xl-4 ant-col-xxl-8"
+          class="ant-col"
           style="padding-left:8px;padding-right:8px"
         >
           <div
@@ -544,7 +544,7 @@ exports[`renders ./components/list/demo/resposive.md correctly 1`] = `
           </div>
         </div>
         <div
-          class="ant-col ant-col-xs-24 ant-col-sm-12 ant-col-md-6 ant-col-lg-6 ant-col-xl-4 ant-col-xxl-8"
+          class="ant-col"
           style="padding-left:8px;padding-right:8px"
         >
           <div
@@ -575,7 +575,7 @@ exports[`renders ./components/list/demo/resposive.md correctly 1`] = `
           </div>
         </div>
         <div
-          class="ant-col ant-col-xs-24 ant-col-sm-12 ant-col-md-6 ant-col-lg-6 ant-col-xl-4 ant-col-xxl-8"
+          class="ant-col"
           style="padding-left:8px;padding-right:8px"
         >
           <div
@@ -606,7 +606,7 @@ exports[`renders ./components/list/demo/resposive.md correctly 1`] = `
           </div>
         </div>
         <div
-          class="ant-col ant-col-xs-24 ant-col-sm-12 ant-col-md-6 ant-col-lg-6 ant-col-xl-4 ant-col-xxl-8"
+          class="ant-col"
           style="padding-left:8px;padding-right:8px"
         >
           <div

components/list/style/index.less

@@ -30,7 +30,7 @@
     .@{ant-prefix}-pagination-options {
       text-align: left;
     }
-    
+
     .@{list-prefix-cls}-rtl & {
       text-align: left;
     }

components/mentions/__tests__/__snapshots__/demo.test.js.snap

@@ -32,7 +32,7 @@ exports[`renders ./components/mentions/demo/form.md correctly 1`] = `
     class="ant-row ant-form-item"
   >
     <div
-      class="ant-col ant-col-6 ant-form-item-label"
+      class="ant-col ant-form-item-label ant-col-base-6"
     >
       <label
         class=""
@@ -43,7 +43,7 @@ exports[`renders ./components/mentions/demo/form.md correctly 1`] = `
       </label>
     </div>
     <div
-      class="ant-col ant-col-16 ant-form-item-control"
+      class="ant-col ant-form-item-control ant-col-base-16"
     >
       <div
         class="ant-form-item-control-input"
@@ -63,7 +63,7 @@ exports[`renders ./components/mentions/demo/form.md correctly 1`] = `
     class="ant-row ant-form-item"
   >
     <div
-      class="ant-col ant-col-6 ant-form-item-label"
+      class="ant-col ant-form-item-label ant-col-base-6"
     >
       <label
         class="ant-form-item-required"
@@ -74,7 +74,7 @@ exports[`renders ./components/mentions/demo/form.md correctly 1`] = `
       </label>
     </div>
     <div
-      class="ant-col ant-col-16 ant-form-item-control"
+      class="ant-col ant-form-item-control ant-col-base-16"
     >
       <div
         class="ant-form-item-control-input"
@@ -95,7 +95,7 @@ exports[`renders ./components/mentions/demo/form.md correctly 1`] = `
     class="ant-row ant-form-item"
   >
     <div
-      class="ant-col ant-col-14 ant-col-offset-6 ant-form-item-control"
+      class="ant-col ant-form-item-control ant-col-base-14 ant-col-base-offset-6"
     >
       <div
         class="ant-form-item-control-input"

components/slider/__tests__/__snapshots__/demo.test.js.snap

@@ -231,7 +231,7 @@ exports[`renders ./components/slider/demo/input-number.md correctly 1`] = `
     class="ant-row"
   >
     <div
-      class="ant-col ant-col-12"
+      class="ant-col ant-col-base-12"
     >
       <div
         class="ant-slider"
@@ -262,7 +262,7 @@ exports[`renders ./components/slider/demo/input-number.md correctly 1`] = `
       </div>
     </div>
     <div
-      class="ant-col ant-col-4"
+      class="ant-col ant-col-base-4"
     >
       <div
         class="ant-input-number"
@@ -351,7 +351,7 @@ exports[`renders ./components/slider/demo/input-number.md correctly 1`] = `
     class="ant-row"
   >
     <div
-      class="ant-col ant-col-12"
+      class="ant-col ant-col-base-12"
     >
       <div
         class="ant-slider"
@@ -382,7 +382,7 @@ exports[`renders ./components/slider/demo/input-number.md correctly 1`] = `
       </div>
     </div>
     <div
-      class="ant-col ant-col-4"
+      class="ant-col ant-col-base-4"
     >
       <div
         class="ant-input-number"

components/statistic/__tests__/__snapshots__/demo.test.js.snap

@@ -6,7 +6,7 @@ exports[`renders ./components/statistic/demo/basic.md correctly 1`] = `
   style="margin-left:-8px;margin-right:-8px"
 >
   <div
-    class="ant-col ant-col-12"
+    class="ant-col ant-col-base-12"
     style="padding-left:8px;padding-right:8px"
   >
     <div
@@ -33,7 +33,7 @@ exports[`renders ./components/statistic/demo/basic.md correctly 1`] = `
     </div>
   </div>
   <div
-    class="ant-col ant-col-12"
+    class="ant-col ant-col-base-12"
     style="padding-left:8px;padding-right:8px"
   >
     <div
@@ -85,7 +85,7 @@ exports[`renders ./components/statistic/demo/card.md correctly 1`] = `
     style="margin-left:-8px;margin-right:-8px"
   >
     <div
-      class="ant-col ant-col-12"
+      class="ant-col ant-col-base-12"
       style="padding-left:8px;padding-right:8px"
     >
       <div
@@ -155,7 +155,7 @@ exports[`renders ./components/statistic/demo/card.md correctly 1`] = `
       </div>
     </div>
     <div
-      class="ant-col ant-col-12"
+      class="ant-col ant-col-base-12"
       style="padding-left:8px;padding-right:8px"
     >
       <div
@@ -234,7 +234,7 @@ exports[`renders ./components/statistic/demo/countdown.md correctly 1`] = `
   style="margin-left:-8px;margin-right:-8px"
 >
   <div
-    class="ant-col ant-col-12"
+    class="ant-col ant-col-base-12"
     style="padding-left:8px;padding-right:8px"
   >
     <div
@@ -257,7 +257,7 @@ exports[`renders ./components/statistic/demo/countdown.md correctly 1`] = `
     </div>
   </div>
   <div
-    class="ant-col ant-col-12"
+    class="ant-col ant-col-base-12"
     style="padding-left:8px;padding-right:8px"
   >
     <div
@@ -280,7 +280,7 @@ exports[`renders ./components/statistic/demo/countdown.md correctly 1`] = `
     </div>
   </div>
   <div
-    class="ant-col ant-col-24"
+    class="ant-col ant-col-base-24"
     style="padding-left:8px;padding-right:8px;margin-top:32px"
   >
     <div
@@ -311,7 +311,7 @@ exports[`renders ./components/statistic/demo/unit.md correctly 1`] = `
   style="margin-left:-8px;margin-right:-8px"
 >
   <div
-    class="ant-col ant-col-12"
+    class="ant-col ant-col-base-12"
     style="padding-left:8px;padding-right:8px"
   >
     <div
@@ -362,7 +362,7 @@ exports[`renders ./components/statistic/demo/unit.md correctly 1`] = `
     </div>
   </div>
   <div
-    class="ant-col ant-col-12"
+    class="ant-col ant-col-base-12"
     style="padding-left:8px;padding-right:8px"
   >
     <div

components/upload/__tests__/__snapshots__/demo.test.js.snap

@@ -1979,7 +1979,7 @@ exports[`renders ./components/upload/demo/upload-with-aliyun-oss.md correctly 1`
     class="ant-row ant-form-item"
   >
     <div
-      class="ant-col ant-col-4 ant-form-item-label"
+      class="ant-col ant-form-item-label ant-col-base-4"
     >
       <label
         class=""

site/theme/static/responsive.less

@@ -133,7 +133,8 @@
     border-right: 0;
   }
 
-  .main-container, .ant-row-rtl .main-container {
+  .main-container,
+  .ant-row-rtl .main-container {
     margin-right: 0;
     margin-left: 0;
     padding-right: 16px;