From 95bd4d69039c5ee64a6bd7c90d3d7d2153e9954e Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Sun, 31 Mar 2019 20:25:31 +0800
Subject: [PATCH] :bug: Fix col element missing relative style

close #15626
---
 .../__tests__/__snapshots__/demo.test.js.snap |  26 +-
 .../__snapshots__/index.test.js.snap          |  20 +-
 .../__tests__/__snapshots__/demo.test.js.snap |  10 +-
 .../__tests__/__snapshots__/demo.test.js.snap |   4 +-
 .../__snapshots__/components.test.js.snap     |  12 +-
 .../__tests__/__snapshots__/demo.test.js.snap | 336 +++++++++---------
 .../__snapshots__/label.test.js.snap          |  12 +-
 .../__snapshots__/message.test.js.snap        |  12 +-
 .../__tests__/__snapshots__/demo.test.js.snap | 132 +++----
 .../__snapshots__/index.test.js.snap          |   6 +-
 components/grid/col.tsx                       |   1 +
 components/grid/style/index.less              |   1 -
 .../__tests__/__snapshots__/demo.test.js.snap |   4 +-
 .../__tests__/__snapshots__/demo.test.js.snap |  20 +-
 .../__tests__/__snapshots__/demo.test.js.snap |   6 +-
 .../__tests__/__snapshots__/demo.test.js.snap |  14 +-
 .../__tests__/__snapshots__/demo.test.js.snap |   8 +-
 .../__tests__/__snapshots__/demo.test.js.snap |  18 +-
 .../__tests__/__snapshots__/demo.test.js.snap |  44 +--
 19 files changed, 343 insertions(+), 343 deletions(-)

diff --git a/components/card/__tests__/__snapshots__/demo.test.js.snap b/components/card/__tests__/__snapshots__/demo.test.js.snap
index 7b0e267dc7..f338bfcb61 100644
--- a/components/card/__tests__/__snapshots__/demo.test.js.snap
+++ b/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-8"
+      class="ant-col ant-col-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-8"
+      class="ant-col ant-col-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-8"
+      class="ant-col ant-col-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-22"
+            class="ant-col ant-col-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-8"
+            class="ant-col ant-col-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-15"
+            class="ant-col ant-col-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-6"
+            class="ant-col ant-col-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-18"
+            class="ant-col ant-col-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-13"
+            class="ant-col ant-col-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-9"
+            class="ant-col ant-col-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-4"
+            class="ant-col ant-col-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-3"
+            class="ant-col ant-col-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-16"
+            class="ant-col ant-col-16"
             style="padding-left:4px;padding-right:4px"
           >
             <div
diff --git a/components/card/__tests__/__snapshots__/index.test.js.snap b/components/card/__tests__/__snapshots__/index.test.js.snap
index 6d68a5f21e..18216decda 100644
--- a/components/card/__tests__/__snapshots__/index.test.js.snap
+++ b/components/card/__tests__/__snapshots__/index.test.js.snap
@@ -17,7 +17,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-22"
+          class="ant-col ant-col-22"
           style="padding-left: 4px; padding-right: 4px;"
         >
           <div
@@ -30,7 +30,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-8"
+          class="ant-col ant-col-8"
           style="padding-left: 4px; padding-right: 4px;"
         >
           <div
@@ -38,7 +38,7 @@ exports[`Card should still have padding when card which set padding to 0 is load
           />
         </div>
         <div
-          class="ant-col-15"
+          class="ant-col ant-col-15"
           style="padding-left: 4px; padding-right: 4px;"
         >
           <div
@@ -51,7 +51,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-6"
+          class="ant-col ant-col-6"
           style="padding-left: 4px; padding-right: 4px;"
         >
           <div
@@ -59,7 +59,7 @@ exports[`Card should still have padding when card which set padding to 0 is load
           />
         </div>
         <div
-          class="ant-col-18"
+          class="ant-col ant-col-18"
           style="padding-left: 4px; padding-right: 4px;"
         >
           <div
@@ -72,7 +72,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-13"
+          class="ant-col ant-col-13"
           style="padding-left: 4px; padding-right: 4px;"
         >
           <div
@@ -80,7 +80,7 @@ exports[`Card should still have padding when card which set padding to 0 is load
           />
         </div>
         <div
-          class="ant-col-9"
+          class="ant-col ant-col-9"
           style="padding-left: 4px; padding-right: 4px;"
         >
           <div
@@ -93,7 +93,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-4"
+          class="ant-col ant-col-4"
           style="padding-left: 4px; padding-right: 4px;"
         >
           <div
@@ -101,7 +101,7 @@ exports[`Card should still have padding when card which set padding to 0 is load
           />
         </div>
         <div
-          class="ant-col-3"
+          class="ant-col ant-col-3"
           style="padding-left: 4px; padding-right: 4px;"
         >
           <div
@@ -109,7 +109,7 @@ exports[`Card should still have padding when card which set padding to 0 is load
           />
         </div>
         <div
-          class="ant-col-16"
+          class="ant-col ant-col-16"
           style="padding-left: 4px; padding-right: 4px;"
         >
           <div
diff --git a/components/checkbox/__tests__/__snapshots__/demo.test.js.snap b/components/checkbox/__tests__/__snapshots__/demo.test.js.snap
index 800d2fa767..7e97524324 100644
--- a/components/checkbox/__tests__/__snapshots__/demo.test.js.snap
+++ b/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-8"
+      class="ant-col ant-col-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-8"
+      class="ant-col ant-col-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-8"
+      class="ant-col ant-col-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-8"
+      class="ant-col ant-col-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-8"
+      class="ant-col ant-col-8"
     >
       <label
         class="ant-checkbox-wrapper"
diff --git a/components/comment/__tests__/__snapshots__/demo.test.js.snap b/components/comment/__tests__/__snapshots__/demo.test.js.snap
index a361426711..5d9ef09d47 100644
--- a/components/comment/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/comment/__tests__/__snapshots__/demo.test.js.snap
@@ -151,7 +151,7 @@ exports[`renders ./components/comment/demo/editor.md correctly 1`] = `
               class="ant-row ant-form-item"
             >
               <div
-                class="ant-form-item-control-wrapper"
+                class="ant-col ant-form-item-control-wrapper"
               >
                 <div
                   class="ant-form-item-control"
@@ -171,7 +171,7 @@ exports[`renders ./components/comment/demo/editor.md correctly 1`] = `
               class="ant-row ant-form-item"
             >
               <div
-                class="ant-form-item-control-wrapper"
+                class="ant-col ant-form-item-control-wrapper"
               >
                 <div
                   class="ant-form-item-control"
diff --git a/components/config-provider/__tests__/__snapshots__/components.test.js.snap b/components/config-provider/__tests__/__snapshots__/components.test.js.snap
index 7a4a2e2497..7144d5e2d5 100644
--- a/components/config-provider/__tests__/__snapshots__/components.test.js.snap
+++ b/components/config-provider/__tests__/__snapshots__/components.test.js.snap
@@ -7031,7 +7031,7 @@ exports[`ConfigProvider components Form configProvider 1`] = `
     class="config-row config-form-item config-form-item-with-help"
   >
     <div
-      class="config-form-item-control-wrapper"
+      class="config-col config-form-item-control-wrapper"
     >
       <div
         class="config-form-item-control has-error"
@@ -7064,7 +7064,7 @@ exports[`ConfigProvider components Form normal 1`] = `
     class="ant-row ant-form-item ant-form-item-with-help"
   >
     <div
-      class="ant-form-item-control-wrapper"
+      class="ant-col ant-form-item-control-wrapper"
     >
       <div
         class="ant-form-item-control has-error"
@@ -7097,7 +7097,7 @@ exports[`ConfigProvider components Form prefixCls 1`] = `
     class="ant-row prefix-Form-item prefix-Form-item-with-help"
   >
     <div
-      class="prefix-Form-item-control-wrapper"
+      class="ant-col prefix-Form-item-control-wrapper"
     >
       <div
         class="prefix-Form-item-control has-error"
@@ -7127,7 +7127,7 @@ exports[`ConfigProvider components Grid configProvider 1`] = `
   class="config-row"
 >
   <div
-    class="config-col-1"
+    class="config-col config-col-1"
   />
 </div>
 `;
@@ -7137,7 +7137,7 @@ exports[`ConfigProvider components Grid normal 1`] = `
   class="ant-row"
 >
   <div
-    class="ant-col-1"
+    class="ant-col ant-col-1"
   />
 </div>
 `;
@@ -7147,7 +7147,7 @@ exports[`ConfigProvider components Grid prefixCls 1`] = `
   class="prefix-row"
 >
   <div
-    class="prefix-col-1"
+    class="prefix-col prefix-col-1"
   />
 </div>
 `;
diff --git a/components/form/__tests__/__snapshots__/demo.test.js.snap b/components/form/__tests__/__snapshots__/demo.test.js.snap
index 247fed4e88..f91614423a 100644
--- a/components/form/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/form/__tests__/__snapshots__/demo.test.js.snap
@@ -10,14 +10,14 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
       style="margin-left:-12px;margin-right:-12px"
     >
       <div
-        class="ant-col-8"
+        class="ant-col ant-col-8"
         style="padding-left:12px;padding-right:12px;display:block"
       >
         <div
           class="ant-row ant-form-item"
         >
           <div
-            class="ant-form-item-label"
+            class="ant-col ant-form-item-label"
           >
             <label
               class="ant-form-item-required"
@@ -28,7 +28,7 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
             </label>
           </div>
           <div
-            class="ant-form-item-control-wrapper"
+            class="ant-col ant-form-item-control-wrapper"
           >
             <div
               class="ant-form-item-control"
@@ -51,14 +51,14 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
         </div>
       </div>
       <div
-        class="ant-col-8"
+        class="ant-col ant-col-8"
         style="padding-left:12px;padding-right:12px;display:block"
       >
         <div
           class="ant-row ant-form-item"
         >
           <div
-            class="ant-form-item-label"
+            class="ant-col ant-form-item-label"
           >
             <label
               class="ant-form-item-required"
@@ -69,7 +69,7 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
             </label>
           </div>
           <div
-            class="ant-form-item-control-wrapper"
+            class="ant-col ant-form-item-control-wrapper"
           >
             <div
               class="ant-form-item-control"
@@ -92,14 +92,14 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
         </div>
       </div>
       <div
-        class="ant-col-8"
+        class="ant-col ant-col-8"
         style="padding-left:12px;padding-right:12px;display:block"
       >
         <div
           class="ant-row ant-form-item"
         >
           <div
-            class="ant-form-item-label"
+            class="ant-col ant-form-item-label"
           >
             <label
               class="ant-form-item-required"
@@ -110,7 +110,7 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
             </label>
           </div>
           <div
-            class="ant-form-item-control-wrapper"
+            class="ant-col ant-form-item-control-wrapper"
           >
             <div
               class="ant-form-item-control"
@@ -133,14 +133,14 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
         </div>
       </div>
       <div
-        class="ant-col-8"
+        class="ant-col ant-col-8"
         style="padding-left:12px;padding-right:12px;display:block"
       >
         <div
           class="ant-row ant-form-item"
         >
           <div
-            class="ant-form-item-label"
+            class="ant-col ant-form-item-label"
           >
             <label
               class="ant-form-item-required"
@@ -151,7 +151,7 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
             </label>
           </div>
           <div
-            class="ant-form-item-control-wrapper"
+            class="ant-col ant-form-item-control-wrapper"
           >
             <div
               class="ant-form-item-control"
@@ -174,14 +174,14 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
         </div>
       </div>
       <div
-        class="ant-col-8"
+        class="ant-col ant-col-8"
         style="padding-left:12px;padding-right:12px;display:block"
       >
         <div
           class="ant-row ant-form-item"
         >
           <div
-            class="ant-form-item-label"
+            class="ant-col ant-form-item-label"
           >
             <label
               class="ant-form-item-required"
@@ -192,7 +192,7 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
             </label>
           </div>
           <div
-            class="ant-form-item-control-wrapper"
+            class="ant-col ant-form-item-control-wrapper"
           >
             <div
               class="ant-form-item-control"
@@ -215,14 +215,14 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
         </div>
       </div>
       <div
-        class="ant-col-8"
+        class="ant-col ant-col-8"
         style="padding-left:12px;padding-right:12px;display:block"
       >
         <div
           class="ant-row ant-form-item"
         >
           <div
-            class="ant-form-item-label"
+            class="ant-col ant-form-item-label"
           >
             <label
               class="ant-form-item-required"
@@ -233,7 +233,7 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
             </label>
           </div>
           <div
-            class="ant-form-item-control-wrapper"
+            class="ant-col ant-form-item-control-wrapper"
           >
             <div
               class="ant-form-item-control"
@@ -256,14 +256,14 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
         </div>
       </div>
       <div
-        class="ant-col-8"
+        class="ant-col ant-col-8"
         style="padding-left:12px;padding-right:12px;display:none"
       >
         <div
           class="ant-row ant-form-item"
         >
           <div
-            class="ant-form-item-label"
+            class="ant-col ant-form-item-label"
           >
             <label
               class="ant-form-item-required"
@@ -274,7 +274,7 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
             </label>
           </div>
           <div
-            class="ant-form-item-control-wrapper"
+            class="ant-col ant-form-item-control-wrapper"
           >
             <div
               class="ant-form-item-control"
@@ -297,14 +297,14 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
         </div>
       </div>
       <div
-        class="ant-col-8"
+        class="ant-col ant-col-8"
         style="padding-left:12px;padding-right:12px;display:none"
       >
         <div
           class="ant-row ant-form-item"
         >
           <div
-            class="ant-form-item-label"
+            class="ant-col ant-form-item-label"
           >
             <label
               class="ant-form-item-required"
@@ -315,7 +315,7 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
             </label>
           </div>
           <div
-            class="ant-form-item-control-wrapper"
+            class="ant-col ant-form-item-control-wrapper"
           >
             <div
               class="ant-form-item-control"
@@ -338,14 +338,14 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
         </div>
       </div>
       <div
-        class="ant-col-8"
+        class="ant-col ant-col-8"
         style="padding-left:12px;padding-right:12px;display:none"
       >
         <div
           class="ant-row ant-form-item"
         >
           <div
-            class="ant-form-item-label"
+            class="ant-col ant-form-item-label"
           >
             <label
               class="ant-form-item-required"
@@ -356,7 +356,7 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
             </label>
           </div>
           <div
-            class="ant-form-item-control-wrapper"
+            class="ant-col ant-form-item-control-wrapper"
           >
             <div
               class="ant-form-item-control"
@@ -379,14 +379,14 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
         </div>
       </div>
       <div
-        class="ant-col-8"
+        class="ant-col ant-col-8"
         style="padding-left:12px;padding-right:12px;display:none"
       >
         <div
           class="ant-row ant-form-item"
         >
           <div
-            class="ant-form-item-label"
+            class="ant-col ant-form-item-label"
           >
             <label
               class="ant-form-item-required"
@@ -397,7 +397,7 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
             </label>
           </div>
           <div
-            class="ant-form-item-control-wrapper"
+            class="ant-col ant-form-item-control-wrapper"
           >
             <div
               class="ant-form-item-control"
@@ -424,7 +424,7 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
       class="ant-row"
     >
       <div
-        class="ant-col-24"
+        class="ant-col ant-col-24"
         style="text-align:right"
       >
         <button
@@ -486,7 +486,7 @@ exports[`renders ./components/form/demo/coordinated.md correctly 1`] = `
     class="ant-row ant-form-item"
   >
     <div
-      class="ant-col-5 ant-form-item-label"
+      class="ant-col ant-col-5 ant-form-item-label"
     >
       <label
         class="ant-form-item-required"
@@ -497,7 +497,7 @@ exports[`renders ./components/form/demo/coordinated.md correctly 1`] = `
       </label>
     </div>
     <div
-      class="ant-col-12 ant-form-item-control-wrapper"
+      class="ant-col ant-col-12 ant-form-item-control-wrapper"
     >
       <div
         class="ant-form-item-control"
@@ -521,7 +521,7 @@ exports[`renders ./components/form/demo/coordinated.md correctly 1`] = `
     class="ant-row ant-form-item"
   >
     <div
-      class="ant-col-5 ant-form-item-label"
+      class="ant-col ant-col-5 ant-form-item-label"
     >
       <label
         class="ant-form-item-required"
@@ -532,7 +532,7 @@ exports[`renders ./components/form/demo/coordinated.md correctly 1`] = `
       </label>
     </div>
     <div
-      class="ant-col-12 ant-form-item-control-wrapper"
+      class="ant-col ant-col-12 ant-form-item-control-wrapper"
     >
       <div
         class="ant-form-item-control"
@@ -601,7 +601,7 @@ exports[`renders ./components/form/demo/coordinated.md correctly 1`] = `
     class="ant-row ant-form-item"
   >
     <div
-      class="ant-col-12 ant-col-offset-5 ant-form-item-control-wrapper"
+      class="ant-col ant-col-12 ant-col-offset-5 ant-form-item-control-wrapper"
     >
       <div
         class="ant-form-item-control"
@@ -632,7 +632,7 @@ exports[`renders ./components/form/demo/customized-form-controls.md correctly 1`
     class="ant-row ant-form-item"
   >
     <div
-      class="ant-form-item-label"
+      class="ant-col ant-form-item-label"
     >
       <label
         class=""
@@ -643,7 +643,7 @@ exports[`renders ./components/form/demo/customized-form-controls.md correctly 1`
       </label>
     </div>
     <div
-      class="ant-form-item-control-wrapper"
+      class="ant-col ant-form-item-control-wrapper"
     >
       <div
         class="ant-form-item-control has-success"
@@ -718,7 +718,7 @@ exports[`renders ./components/form/demo/customized-form-controls.md correctly 1`
     class="ant-row ant-form-item"
   >
     <div
-      class="ant-form-item-control-wrapper"
+      class="ant-col ant-form-item-control-wrapper"
     >
       <div
         class="ant-form-item-control"
@@ -749,7 +749,7 @@ exports[`renders ./components/form/demo/dynamic-form-item.md correctly 1`] = `
     class="ant-row ant-form-item"
   >
     <div
-      class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-xs-offset-0 ant-col-sm-20 ant-col-sm-offset-4"
+      class="ant-col ant-form-item-control-wrapper ant-col-xs-24 ant-col-xs-offset-0 ant-col-sm-20 ant-col-sm-offset-4"
     >
       <div
         class="ant-form-item-control"
@@ -795,7 +795,7 @@ exports[`renders ./components/form/demo/dynamic-form-item.md correctly 1`] = `
     class="ant-row ant-form-item"
   >
     <div
-      class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-xs-offset-0 ant-col-sm-20 ant-col-sm-offset-4"
+      class="ant-col ant-form-item-control-wrapper ant-col-xs-24 ant-col-xs-offset-0 ant-col-sm-20 ant-col-sm-offset-4"
     >
       <div
         class="ant-form-item-control"
@@ -824,7 +824,7 @@ exports[`renders ./components/form/demo/dynamic-rule.md correctly 1`] = `
     class="ant-row ant-form-item"
   >
     <div
-      class="ant-col-4 ant-form-item-label"
+      class="ant-col ant-col-4 ant-form-item-label"
     >
       <label
         class="ant-form-item-required"
@@ -835,7 +835,7 @@ exports[`renders ./components/form/demo/dynamic-rule.md correctly 1`] = `
       </label>
     </div>
     <div
-      class="ant-col-8 ant-form-item-control-wrapper"
+      class="ant-col ant-col-8 ant-form-item-control-wrapper"
     >
       <div
         class="ant-form-item-control"
@@ -860,7 +860,7 @@ exports[`renders ./components/form/demo/dynamic-rule.md correctly 1`] = `
     class="ant-row ant-form-item"
   >
     <div
-      class="ant-col-4 ant-form-item-label"
+      class="ant-col ant-col-4 ant-form-item-label"
     >
       <label
         class=""
@@ -871,7 +871,7 @@ exports[`renders ./components/form/demo/dynamic-rule.md correctly 1`] = `
       </label>
     </div>
     <div
-      class="ant-col-8 ant-form-item-control-wrapper"
+      class="ant-col ant-col-8 ant-form-item-control-wrapper"
     >
       <div
         class="ant-form-item-control"
@@ -896,7 +896,7 @@ exports[`renders ./components/form/demo/dynamic-rule.md correctly 1`] = `
     class="ant-row ant-form-item"
   >
     <div
-      class="ant-col-8 ant-col-offset-4 ant-form-item-control-wrapper"
+      class="ant-col ant-col-8 ant-col-offset-4 ant-form-item-control-wrapper"
     >
       <div
         class="ant-form-item-control"
@@ -930,7 +930,7 @@ exports[`renders ./components/form/demo/dynamic-rule.md correctly 1`] = `
     class="ant-row ant-form-item"
   >
     <div
-      class="ant-col-8 ant-col-offset-4 ant-form-item-control-wrapper"
+      class="ant-col ant-col-8 ant-col-offset-4 ant-form-item-control-wrapper"
     >
       <div
         class="ant-form-item-control"
@@ -975,7 +975,7 @@ exports[`renders ./components/form/demo/global-state.md correctly 1`] = `
       class="ant-row ant-form-item"
     >
       <div
-        class="ant-form-item-label"
+        class="ant-col ant-form-item-label"
       >
         <label
           class="ant-form-item-required"
@@ -986,7 +986,7 @@ exports[`renders ./components/form/demo/global-state.md correctly 1`] = `
         </label>
       </div>
       <div
-        class="ant-form-item-control-wrapper"
+        class="ant-col ant-form-item-control-wrapper"
       >
         <div
           class="ant-form-item-control has-success"
@@ -1027,7 +1027,7 @@ exports[`renders ./components/form/demo/horizontal-login.md correctly 1`] = `
     class="ant-row ant-form-item"
   >
     <div
-      class="ant-form-item-control-wrapper"
+      class="ant-col ant-form-item-control-wrapper"
     >
       <div
         class="ant-form-item-control"
@@ -1079,7 +1079,7 @@ exports[`renders ./components/form/demo/horizontal-login.md correctly 1`] = `
     class="ant-row ant-form-item"
   >
     <div
-      class="ant-form-item-control-wrapper"
+      class="ant-col ant-form-item-control-wrapper"
     >
       <div
         class="ant-form-item-control"
@@ -1131,7 +1131,7 @@ exports[`renders ./components/form/demo/horizontal-login.md correctly 1`] = `
     class="ant-row ant-form-item"
   >
     <div
-      class="ant-form-item-control-wrapper"
+      class="ant-col ant-form-item-control-wrapper"
     >
       <div
         class="ant-form-item-control"
@@ -1163,7 +1163,7 @@ exports[`renders ./components/form/demo/layout.md correctly 1`] = `
       class="ant-row ant-form-item"
     >
       <div
-        class="ant-col-4 ant-form-item-label"
+        class="ant-col ant-col-4 ant-form-item-label"
       >
         <label
           class=""
@@ -1173,7 +1173,7 @@ exports[`renders ./components/form/demo/layout.md correctly 1`] = `
         </label>
       </div>
       <div
-        class="ant-col-14 ant-form-item-control-wrapper"
+        class="ant-col ant-col-14 ant-form-item-control-wrapper"
       >
         <div
           class="ant-form-item-control"
@@ -1251,7 +1251,7 @@ exports[`renders ./components/form/demo/layout.md correctly 1`] = `
       class="ant-row ant-form-item"
     >
       <div
-        class="ant-col-4 ant-form-item-label"
+        class="ant-col ant-col-4 ant-form-item-label"
       >
         <label
           class=""
@@ -1261,7 +1261,7 @@ exports[`renders ./components/form/demo/layout.md correctly 1`] = `
         </label>
       </div>
       <div
-        class="ant-col-14 ant-form-item-control-wrapper"
+        class="ant-col ant-col-14 ant-form-item-control-wrapper"
       >
         <div
           class="ant-form-item-control"
@@ -1283,7 +1283,7 @@ exports[`renders ./components/form/demo/layout.md correctly 1`] = `
       class="ant-row ant-form-item"
     >
       <div
-        class="ant-col-4 ant-form-item-label"
+        class="ant-col ant-col-4 ant-form-item-label"
       >
         <label
           class=""
@@ -1293,7 +1293,7 @@ exports[`renders ./components/form/demo/layout.md correctly 1`] = `
         </label>
       </div>
       <div
-        class="ant-col-14 ant-form-item-control-wrapper"
+        class="ant-col ant-col-14 ant-form-item-control-wrapper"
       >
         <div
           class="ant-form-item-control"
@@ -1315,7 +1315,7 @@ exports[`renders ./components/form/demo/layout.md correctly 1`] = `
       class="ant-row ant-form-item"
     >
       <div
-        class="ant-col-14 ant-col-offset-4 ant-form-item-control-wrapper"
+        class="ant-col ant-col-14 ant-col-offset-4 ant-form-item-control-wrapper"
       >
         <div
           class="ant-form-item-control"
@@ -1347,7 +1347,7 @@ exports[`renders ./components/form/demo/normal-login.md correctly 1`] = `
     class="ant-row ant-form-item"
   >
     <div
-      class="ant-form-item-control-wrapper"
+      class="ant-col ant-form-item-control-wrapper"
     >
       <div
         class="ant-form-item-control"
@@ -1399,7 +1399,7 @@ exports[`renders ./components/form/demo/normal-login.md correctly 1`] = `
     class="ant-row ant-form-item"
   >
     <div
-      class="ant-form-item-control-wrapper"
+      class="ant-col ant-form-item-control-wrapper"
     >
       <div
         class="ant-form-item-control"
@@ -1451,7 +1451,7 @@ exports[`renders ./components/form/demo/normal-login.md correctly 1`] = `
     class="ant-row ant-form-item"
   >
     <div
-      class="ant-form-item-control-wrapper"
+      class="ant-col ant-form-item-control-wrapper"
     >
       <div
         class="ant-form-item-control has-success"
@@ -1516,7 +1516,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
     class="ant-row ant-form-item"
   >
     <div
-      class="ant-form-item-label ant-col-xs-24 ant-col-sm-8"
+      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
     >
       <label
         class="ant-form-item-required"
@@ -1527,7 +1527,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
       </label>
     </div>
     <div
-      class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-16"
+      class="ant-col ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-16"
     >
       <div
         class="ant-form-item-control"
@@ -1551,7 +1551,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
     class="ant-row ant-form-item"
   >
     <div
-      class="ant-form-item-label ant-col-xs-24 ant-col-sm-8"
+      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
     >
       <label
         class="ant-form-item-required"
@@ -1562,7 +1562,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
       </label>
     </div>
     <div
-      class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-16"
+      class="ant-col ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-16"
     >
       <div
         class="ant-form-item-control"
@@ -1586,7 +1586,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
     class="ant-row ant-form-item"
   >
     <div
-      class="ant-form-item-label ant-col-xs-24 ant-col-sm-8"
+      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
     >
       <label
         class="ant-form-item-required"
@@ -1597,7 +1597,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
       </label>
     </div>
     <div
-      class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-16"
+      class="ant-col ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-16"
     >
       <div
         class="ant-form-item-control"
@@ -1621,7 +1621,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
     class="ant-row ant-form-item"
   >
     <div
-      class="ant-form-item-label ant-col-xs-24 ant-col-sm-8"
+      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
     >
       <label
         class="ant-form-item-required"
@@ -1655,7 +1655,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
       </label>
     </div>
     <div
-      class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-16"
+      class="ant-col ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-16"
     >
       <div
         class="ant-form-item-control"
@@ -1679,7 +1679,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
     class="ant-row ant-form-item"
   >
     <div
-      class="ant-form-item-label ant-col-xs-24 ant-col-sm-8"
+      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
     >
       <label
         class="ant-form-item-required"
@@ -1690,7 +1690,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
       </label>
     </div>
     <div
-      class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-16"
+      class="ant-col ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-16"
     >
       <div
         class="ant-form-item-control has-success"
@@ -1764,7 +1764,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
     class="ant-row ant-form-item"
   >
     <div
-      class="ant-form-item-label ant-col-xs-24 ant-col-sm-8"
+      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
     >
       <label
         class="ant-form-item-required"
@@ -1775,7 +1775,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
       </label>
     </div>
     <div
-      class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-16"
+      class="ant-col ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-16"
     >
       <div
         class="ant-form-item-control"
@@ -1866,7 +1866,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
     class="ant-row ant-form-item"
   >
     <div
-      class="ant-form-item-label ant-col-xs-24 ant-col-sm-8"
+      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
     >
       <label
         class="ant-form-item-required"
@@ -1877,7 +1877,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
       </label>
     </div>
     <div
-      class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-16"
+      class="ant-col ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-16"
     >
       <div
         class="ant-form-item-control"
@@ -1965,7 +1965,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
     class="ant-row ant-form-item"
   >
     <div
-      class="ant-form-item-label ant-col-xs-24 ant-col-sm-8"
+      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
     >
       <label
         class="ant-form-item-required"
@@ -1976,7 +1976,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
       </label>
     </div>
     <div
-      class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-16"
+      class="ant-col ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-16"
     >
       <div
         class="ant-form-item-control"
@@ -1989,7 +1989,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
             style="margin-left:-4px;margin-right:-4px"
           >
             <div
-              class="ant-col-12"
+              class="ant-col ant-col-12"
               style="padding-left:4px;padding-right:4px"
             >
               <input
@@ -2002,7 +2002,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
               />
             </div>
             <div
-              class="ant-col-12"
+              class="ant-col ant-col-12"
               style="padding-left:4px;padding-right:4px"
             >
               <button
@@ -2028,7 +2028,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
     class="ant-row ant-form-item"
   >
     <div
-      class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-xs-offset-0 ant-col-sm-16 ant-col-sm-offset-8"
+      class="ant-col ant-form-item-control-wrapper ant-col-xs-24 ant-col-xs-offset-0 ant-col-sm-16 ant-col-sm-offset-8"
     >
       <div
         class="ant-form-item-control"
@@ -2070,7 +2070,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
     class="ant-row ant-form-item"
   >
     <div
-      class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-xs-offset-0 ant-col-sm-16 ant-col-sm-offset-8"
+      class="ant-col ant-form-item-control-wrapper ant-col-xs-24 ant-col-xs-offset-0 ant-col-sm-16 ant-col-sm-offset-8"
     >
       <div
         class="ant-form-item-control"
@@ -2111,14 +2111,14 @@ exports[`renders ./components/form/demo/style-check-debug.md correctly 1`] = `
       style="margin-left:-8px;margin-right:-8px"
     >
       <div
-        class="ant-col-md-24 ant-col-lg-12"
+        class="ant-col ant-col-md-24 ant-col-lg-12"
         style="padding-left:8px;padding-right:8px"
       >
         <div
           class="ant-row ant-form-item"
         >
           <div
-            class="ant-form-item-label"
+            class="ant-col ant-form-item-label"
           >
             <label
               class="ant-form-item-no-colon"
@@ -2128,7 +2128,7 @@ exports[`renders ./components/form/demo/style-check-debug.md correctly 1`] = `
             </label>
           </div>
           <div
-            class="ant-form-item-control-wrapper"
+            class="ant-col ant-form-item-control-wrapper"
           >
             <div
               class="ant-form-item-control"
@@ -2147,14 +2147,14 @@ exports[`renders ./components/form/demo/style-check-debug.md correctly 1`] = `
         </div>
       </div>
       <div
-        class="ant-col-md-24 ant-col-lg-12"
+        class="ant-col ant-col-md-24 ant-col-lg-12"
         style="padding-left:8px;padding-right:8px"
       >
         <div
           class="ant-row ant-form-item"
         >
           <div
-            class="ant-form-item-label"
+            class="ant-col ant-form-item-label"
           >
             <label
               class=""
@@ -2164,7 +2164,7 @@ exports[`renders ./components/form/demo/style-check-debug.md correctly 1`] = `
             </label>
           </div>
           <div
-            class="ant-form-item-control-wrapper"
+            class="ant-col ant-form-item-control-wrapper"
           >
             <div
               class="ant-form-item-control"
@@ -2220,14 +2220,14 @@ exports[`renders ./components/form/demo/style-check-debug.md correctly 1`] = `
         </div>
       </div>
       <div
-        class="ant-col-md-24 ant-col-lg-12"
+        class="ant-col ant-col-md-24 ant-col-lg-12"
         style="padding-left:8px;padding-right:8px"
       >
         <div
           class="ant-row ant-form-item"
         >
           <div
-            class="ant-form-item-label"
+            class="ant-col ant-form-item-label"
           >
             <label
               class=""
@@ -2237,7 +2237,7 @@ exports[`renders ./components/form/demo/style-check-debug.md correctly 1`] = `
             </label>
           </div>
           <div
-            class="ant-form-item-control-wrapper"
+            class="ant-col ant-form-item-control-wrapper"
           >
             <div
               class="ant-form-item-control"
@@ -2324,14 +2324,14 @@ exports[`renders ./components/form/demo/style-check-debug.md correctly 1`] = `
         </div>
       </div>
       <div
-        class="ant-col-md-24 ant-col-lg-12"
+        class="ant-col ant-col-md-24 ant-col-lg-12"
         style="padding-left:8px;padding-right:8px"
       >
         <div
           class="ant-row ant-form-item"
         >
           <div
-            class="ant-form-item-label"
+            class="ant-col ant-form-item-label"
           >
             <label
               class=""
@@ -2341,7 +2341,7 @@ exports[`renders ./components/form/demo/style-check-debug.md correctly 1`] = `
             </label>
           </div>
           <div
-            class="ant-form-item-control-wrapper"
+            class="ant-col ant-form-item-control-wrapper"
           >
             <div
               class="ant-form-item-control"
@@ -2385,14 +2385,14 @@ exports[`renders ./components/form/demo/style-check-debug.md correctly 1`] = `
         </div>
       </div>
       <div
-        class="ant-col-md-24 ant-col-lg-12"
+        class="ant-col ant-col-md-24 ant-col-lg-12"
         style="padding-left:8px;padding-right:8px"
       >
         <div
           class="ant-row ant-form-item"
         >
           <div
-            class="ant-form-item-label"
+            class="ant-col ant-form-item-label"
           >
             <label
               class=""
@@ -2402,7 +2402,7 @@ exports[`renders ./components/form/demo/style-check-debug.md correctly 1`] = `
             </label>
           </div>
           <div
-            class="ant-form-item-control-wrapper"
+            class="ant-col ant-form-item-control-wrapper"
           >
             <div
               class="ant-form-item-control"
@@ -2470,7 +2470,7 @@ exports[`renders ./components/form/demo/time-related-controls.md correctly 1`] =
     class="ant-row ant-form-item"
   >
     <div
-      class="ant-form-item-label ant-col-xs-24 ant-col-sm-8"
+      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
     >
       <label
         class="ant-form-item-required"
@@ -2481,7 +2481,7 @@ exports[`renders ./components/form/demo/time-related-controls.md correctly 1`] =
       </label>
     </div>
     <div
-      class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-16"
+      class="ant-col ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-16"
     >
       <div
         class="ant-form-item-control"
@@ -2528,7 +2528,7 @@ exports[`renders ./components/form/demo/time-related-controls.md correctly 1`] =
     class="ant-row ant-form-item"
   >
     <div
-      class="ant-form-item-label ant-col-xs-24 ant-col-sm-8"
+      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
     >
       <label
         class="ant-form-item-required"
@@ -2539,7 +2539,7 @@ exports[`renders ./components/form/demo/time-related-controls.md correctly 1`] =
       </label>
     </div>
     <div
-      class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-16"
+      class="ant-col ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-16"
     >
       <div
         class="ant-form-item-control"
@@ -2587,7 +2587,7 @@ exports[`renders ./components/form/demo/time-related-controls.md correctly 1`] =
     class="ant-row ant-form-item"
   >
     <div
-      class="ant-form-item-label ant-col-xs-24 ant-col-sm-8"
+      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
     >
       <label
         class="ant-form-item-required"
@@ -2598,7 +2598,7 @@ exports[`renders ./components/form/demo/time-related-controls.md correctly 1`] =
       </label>
     </div>
     <div
-      class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-16"
+      class="ant-col ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-16"
     >
       <div
         class="ant-form-item-control"
@@ -2645,7 +2645,7 @@ exports[`renders ./components/form/demo/time-related-controls.md correctly 1`] =
     class="ant-row ant-form-item"
   >
     <div
-      class="ant-form-item-label ant-col-xs-24 ant-col-sm-8"
+      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
     >
       <label
         class="ant-form-item-required"
@@ -2656,7 +2656,7 @@ exports[`renders ./components/form/demo/time-related-controls.md correctly 1`] =
       </label>
     </div>
     <div
-      class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-16"
+      class="ant-col ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-16"
     >
       <div
         class="ant-form-item-control"
@@ -2719,7 +2719,7 @@ exports[`renders ./components/form/demo/time-related-controls.md correctly 1`] =
     class="ant-row ant-form-item"
   >
     <div
-      class="ant-form-item-label ant-col-xs-24 ant-col-sm-8"
+      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
     >
       <label
         class="ant-form-item-required"
@@ -2730,7 +2730,7 @@ exports[`renders ./components/form/demo/time-related-controls.md correctly 1`] =
       </label>
     </div>
     <div
-      class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-16"
+      class="ant-col ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-16"
     >
       <div
         class="ant-form-item-control"
@@ -2794,7 +2794,7 @@ exports[`renders ./components/form/demo/time-related-controls.md correctly 1`] =
     class="ant-row ant-form-item"
   >
     <div
-      class="ant-form-item-label ant-col-xs-24 ant-col-sm-8"
+      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
     >
       <label
         class="ant-form-item-required"
@@ -2805,7 +2805,7 @@ exports[`renders ./components/form/demo/time-related-controls.md correctly 1`] =
       </label>
     </div>
     <div
-      class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-16"
+      class="ant-col ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-16"
     >
       <div
         class="ant-form-item-control"
@@ -2857,7 +2857,7 @@ exports[`renders ./components/form/demo/time-related-controls.md correctly 1`] =
     class="ant-row ant-form-item"
   >
     <div
-      class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-xs-offset-0 ant-col-sm-16 ant-col-sm-offset-8"
+      class="ant-col ant-form-item-control-wrapper ant-col-xs-24 ant-col-xs-offset-0 ant-col-sm-16 ant-col-sm-offset-8"
     >
       <div
         class="ant-form-item-control"
@@ -2888,7 +2888,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
     class="ant-row ant-form-item"
   >
     <div
-      class="ant-col-6 ant-form-item-label"
+      class="ant-col ant-col-6 ant-form-item-label"
     >
       <label
         class=""
@@ -2898,7 +2898,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
       </label>
     </div>
     <div
-      class="ant-col-14 ant-form-item-control-wrapper"
+      class="ant-col ant-col-14 ant-form-item-control-wrapper"
     >
       <div
         class="ant-form-item-control"
@@ -2919,7 +2919,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
     class="ant-row ant-form-item"
   >
     <div
-      class="ant-col-6 ant-form-item-label"
+      class="ant-col ant-col-6 ant-form-item-label"
     >
       <label
         class="ant-form-item-required"
@@ -2930,7 +2930,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
       </label>
     </div>
     <div
-      class="ant-col-14 ant-form-item-control-wrapper"
+      class="ant-col ant-col-14 ant-form-item-control-wrapper"
     >
       <div
         class="ant-form-item-control"
@@ -2999,7 +2999,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
     class="ant-row ant-form-item"
   >
     <div
-      class="ant-col-6 ant-form-item-label"
+      class="ant-col ant-col-6 ant-form-item-label"
     >
       <label
         class="ant-form-item-required"
@@ -3010,7 +3010,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
       </label>
     </div>
     <div
-      class="ant-col-14 ant-form-item-control-wrapper"
+      class="ant-col ant-col-14 ant-form-item-control-wrapper"
     >
       <div
         class="ant-form-item-control"
@@ -3075,7 +3075,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
     class="ant-row ant-form-item"
   >
     <div
-      class="ant-col-6 ant-form-item-label"
+      class="ant-col ant-col-6 ant-form-item-label"
     >
       <label
         class=""
@@ -3086,7 +3086,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
       </label>
     </div>
     <div
-      class="ant-col-14 ant-form-item-control-wrapper"
+      class="ant-col ant-col-14 ant-form-item-control-wrapper"
     >
       <div
         class="ant-form-item-control has-success"
@@ -3186,7 +3186,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
     class="ant-row ant-form-item"
   >
     <div
-      class="ant-col-6 ant-form-item-label"
+      class="ant-col ant-col-6 ant-form-item-label"
     >
       <label
         class=""
@@ -3197,7 +3197,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
       </label>
     </div>
     <div
-      class="ant-col-14 ant-form-item-control-wrapper"
+      class="ant-col ant-col-14 ant-form-item-control-wrapper"
     >
       <div
         class="ant-form-item-control"
@@ -3226,7 +3226,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
     class="ant-row ant-form-item"
   >
     <div
-      class="ant-col-6 ant-form-item-label"
+      class="ant-col ant-col-6 ant-form-item-label"
     >
       <label
         class=""
@@ -3237,7 +3237,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
       </label>
     </div>
     <div
-      class="ant-col-14 ant-form-item-control-wrapper"
+      class="ant-col ant-col-14 ant-form-item-control-wrapper"
     >
       <div
         class="ant-form-item-control"
@@ -3342,7 +3342,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
     class="ant-row ant-form-item"
   >
     <div
-      class="ant-col-6 ant-form-item-label"
+      class="ant-col ant-col-6 ant-form-item-label"
     >
       <label
         class=""
@@ -3353,7 +3353,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
       </label>
     </div>
     <div
-      class="ant-col-14 ant-form-item-control-wrapper"
+      class="ant-col ant-col-14 ant-form-item-control-wrapper"
     >
       <div
         class="ant-form-item-control"
@@ -3431,7 +3431,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
     class="ant-row ant-form-item"
   >
     <div
-      class="ant-col-6 ant-form-item-label"
+      class="ant-col ant-col-6 ant-form-item-label"
     >
       <label
         class=""
@@ -3442,7 +3442,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
       </label>
     </div>
     <div
-      class="ant-col-14 ant-form-item-control-wrapper"
+      class="ant-col ant-col-14 ant-form-item-control-wrapper"
     >
       <div
         class="ant-form-item-control"
@@ -3520,7 +3520,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
     class="ant-row ant-form-item"
   >
     <div
-      class="ant-col-6 ant-form-item-label"
+      class="ant-col ant-col-6 ant-form-item-label"
     >
       <label
         class=""
@@ -3531,7 +3531,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
       </label>
     </div>
     <div
-      class="ant-col-14 ant-form-item-control-wrapper"
+      class="ant-col ant-col-14 ant-form-item-control-wrapper"
     >
       <div
         class="ant-form-item-control has-success"
@@ -3550,7 +3550,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
               class="ant-row"
             >
               <div
-                class="ant-col-8"
+                class="ant-col ant-col-8"
               >
                 <label
                   class="ant-checkbox-wrapper ant-checkbox-wrapper-checked"
@@ -3574,7 +3574,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
                 </label>
               </div>
               <div
-                class="ant-col-8"
+                class="ant-col ant-col-8"
               >
                 <label
                   class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-wrapper-disabled"
@@ -3599,7 +3599,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
                 </label>
               </div>
               <div
-                class="ant-col-8"
+                class="ant-col ant-col-8"
               >
                 <label
                   class="ant-checkbox-wrapper"
@@ -3622,7 +3622,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
                 </label>
               </div>
               <div
-                class="ant-col-8"
+                class="ant-col ant-col-8"
               >
                 <label
                   class="ant-checkbox-wrapper"
@@ -3645,7 +3645,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
                 </label>
               </div>
               <div
-                class="ant-col-8"
+                class="ant-col ant-col-8"
               >
                 <label
                   class="ant-checkbox-wrapper"
@@ -3677,7 +3677,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
     class="ant-row ant-form-item"
   >
     <div
-      class="ant-col-6 ant-form-item-label"
+      class="ant-col ant-col-6 ant-form-item-label"
     >
       <label
         class=""
@@ -3688,7 +3688,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
       </label>
     </div>
     <div
-      class="ant-col-14 ant-form-item-control-wrapper"
+      class="ant-col ant-col-14 ant-form-item-control-wrapper"
     >
       <div
         class="ant-form-item-control has-success"
@@ -3990,7 +3990,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
     class="ant-row ant-form-item"
   >
     <div
-      class="ant-col-6 ant-form-item-label"
+      class="ant-col ant-col-6 ant-form-item-label"
     >
       <label
         class=""
@@ -4001,7 +4001,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
       </label>
     </div>
     <div
-      class="ant-col-14 ant-form-item-control-wrapper"
+      class="ant-col ant-col-14 ant-form-item-control-wrapper"
     >
       <div
         class="ant-form-item-control"
@@ -4032,7 +4032,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
     class="ant-row ant-form-item"
   >
     <div
-      class="ant-col-6 ant-form-item-label"
+      class="ant-col ant-col-6 ant-form-item-label"
     >
       <label
         class=""
@@ -4043,7 +4043,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
       </label>
     </div>
     <div
-      class="ant-col-14 ant-form-item-control-wrapper"
+      class="ant-col ant-col-14 ant-form-item-control-wrapper"
     >
       <div
         class="ant-form-item-control"
@@ -4073,7 +4073,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
     class="ant-row ant-form-item"
   >
     <div
-      class="ant-col-12 ant-col-offset-6 ant-form-item-control-wrapper"
+      class="ant-col ant-col-12 ant-col-offset-6 ant-form-item-control-wrapper"
     >
       <div
         class="ant-form-item-control"
@@ -4104,7 +4104,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
     class="ant-row ant-form-item ant-form-item-with-help"
   >
     <div
-      class="ant-form-item-label ant-col-xs-24 ant-col-sm-5"
+      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-5"
     >
       <label
         class=""
@@ -4114,7 +4114,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
       </label>
     </div>
     <div
-      class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-12"
+      class="ant-col ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-12"
     >
       <div
         class="ant-form-item-control has-error"
@@ -4142,7 +4142,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
     class="ant-row ant-form-item"
   >
     <div
-      class="ant-form-item-label ant-col-xs-24 ant-col-sm-5"
+      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-5"
     >
       <label
         class=""
@@ -4152,7 +4152,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
       </label>
     </div>
     <div
-      class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-12"
+      class="ant-col ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-12"
     >
       <div
         class="ant-form-item-control has-warning"
@@ -4175,7 +4175,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
     class="ant-row ant-form-item ant-form-item-with-help"
   >
     <div
-      class="ant-form-item-label ant-col-xs-24 ant-col-sm-5"
+      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-5"
     >
       <label
         class=""
@@ -4185,7 +4185,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
       </label>
     </div>
     <div
-      class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-12"
+      class="ant-col ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-12"
     >
       <div
         class="ant-form-item-control has-feedback is-validating"
@@ -4235,7 +4235,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
     class="ant-row ant-form-item"
   >
     <div
-      class="ant-form-item-label ant-col-xs-24 ant-col-sm-5"
+      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-5"
     >
       <label
         class=""
@@ -4245,7 +4245,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
       </label>
     </div>
     <div
-      class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-12"
+      class="ant-col ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-12"
     >
       <div
         class="ant-form-item-control has-feedback has-success"
@@ -4290,7 +4290,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
     class="ant-row ant-form-item"
   >
     <div
-      class="ant-form-item-label ant-col-xs-24 ant-col-sm-5"
+      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-5"
     >
       <label
         class=""
@@ -4300,7 +4300,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
       </label>
     </div>
     <div
-      class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-12"
+      class="ant-col ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-12"
     >
       <div
         class="ant-form-item-control has-feedback has-warning"
@@ -4345,7 +4345,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
     class="ant-row ant-form-item ant-form-item-with-help"
   >
     <div
-      class="ant-form-item-label ant-col-xs-24 ant-col-sm-5"
+      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-5"
     >
       <label
         class=""
@@ -4355,7 +4355,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
       </label>
     </div>
     <div
-      class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-12"
+      class="ant-col ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-12"
     >
       <div
         class="ant-form-item-control has-feedback has-error"
@@ -4405,7 +4405,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
     class="ant-row ant-form-item"
   >
     <div
-      class="ant-form-item-label ant-col-xs-24 ant-col-sm-5"
+      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-5"
     >
       <label
         class=""
@@ -4415,7 +4415,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
       </label>
     </div>
     <div
-      class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-12"
+      class="ant-col ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-12"
     >
       <div
         class="ant-form-item-control has-feedback has-success"
@@ -4484,7 +4484,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
     class="ant-row ant-form-item"
   >
     <div
-      class="ant-form-item-label ant-col-xs-24 ant-col-sm-5"
+      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-5"
     >
       <label
         class=""
@@ -4494,7 +4494,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
       </label>
     </div>
     <div
-      class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-12"
+      class="ant-col ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-12"
     >
       <div
         class="ant-form-item-control has-feedback has-warning"
@@ -4569,7 +4569,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
     class="ant-row ant-form-item"
   >
     <div
-      class="ant-form-item-label ant-col-xs-24 ant-col-sm-5"
+      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-5"
     >
       <label
         class=""
@@ -4579,7 +4579,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
       </label>
     </div>
     <div
-      class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-12"
+      class="ant-col ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-12"
     >
       <div
         class="ant-form-item-control has-feedback has-error"
@@ -4667,7 +4667,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
     class="ant-row ant-form-item ant-form-item-with-help"
   >
     <div
-      class="ant-form-item-label ant-col-xs-24 ant-col-sm-5"
+      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-5"
     >
       <label
         class=""
@@ -4677,7 +4677,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
       </label>
     </div>
     <div
-      class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-12"
+      class="ant-col ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-12"
     >
       <div
         class="ant-form-item-control has-feedback is-validating"
@@ -4774,7 +4774,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
     style="margin-bottom:0"
   >
     <div
-      class="ant-form-item-label ant-col-xs-24 ant-col-sm-5"
+      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-5"
     >
       <label
         class=""
@@ -4784,7 +4784,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
       </label>
     </div>
     <div
-      class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-12"
+      class="ant-col ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-12"
     >
       <div
         class="ant-form-item-control"
@@ -4797,7 +4797,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
             style="display:inline-block;width:calc(50% - 12px)"
           >
             <div
-              class="ant-form-item-control-wrapper"
+              class="ant-col ant-form-item-control-wrapper"
             >
               <div
                 class="ant-form-item-control has-error"
@@ -4854,7 +4854,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
             style="display:inline-block;width:calc(50% - 12px)"
           >
             <div
-              class="ant-form-item-control-wrapper"
+              class="ant-col ant-form-item-control-wrapper"
             >
               <div
                 class="ant-form-item-control"
@@ -4904,7 +4904,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
     class="ant-row ant-form-item"
   >
     <div
-      class="ant-form-item-label ant-col-xs-24 ant-col-sm-5"
+      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-5"
     >
       <label
         class=""
@@ -4914,7 +4914,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
       </label>
     </div>
     <div
-      class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-12"
+      class="ant-col ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-12"
     >
       <div
         class="ant-form-item-control has-feedback has-success"
@@ -5033,7 +5033,7 @@ exports[`renders ./components/form/demo/without-form-create.md correctly 1`] = `
     class="ant-row ant-form-item ant-form-item-with-help"
   >
     <div
-      class="ant-col-7 ant-form-item-label"
+      class="ant-col ant-col-7 ant-form-item-label"
     >
       <label
         class=""
@@ -5043,7 +5043,7 @@ exports[`renders ./components/form/demo/without-form-create.md correctly 1`] = `
       </label>
     </div>
     <div
-      class="ant-col-12 ant-form-item-control-wrapper"
+      class="ant-col ant-col-12 ant-form-item-control-wrapper"
     >
       <div
         class="ant-form-item-control"
diff --git a/components/form/__tests__/__snapshots__/label.test.js.snap b/components/form/__tests__/__snapshots__/label.test.js.snap
index 72c07ed759..c21a0e4db7 100644
--- a/components/form/__tests__/__snapshots__/label.test.js.snap
+++ b/components/form/__tests__/__snapshots__/label.test.js.snap
@@ -8,7 +8,7 @@ exports[`Form should props colon of Form.Item override the props colon of Form.
     class="ant-row ant-form-item"
   >
     <div
-      class="ant-form-item-label"
+      class="ant-col ant-form-item-label"
     >
       <label
         class="ant-form-item-no-colon"
@@ -18,7 +18,7 @@ exports[`Form should props colon of Form.Item override the props colon of Form.
       </label>
     </div>
     <div
-      class="ant-form-item-control-wrapper"
+      class="ant-col ant-form-item-control-wrapper"
     >
       <div
         class="ant-form-item-control"
@@ -35,7 +35,7 @@ exports[`Form should props colon of Form.Item override the props colon of Form.
     class="ant-row ant-form-item"
   >
     <div
-      class="ant-form-item-label"
+      class="ant-col ant-form-item-label"
     >
       <label
         class=""
@@ -45,7 +45,7 @@ exports[`Form should props colon of Form.Item override the props colon of Form.
       </label>
     </div>
     <div
-      class="ant-form-item-control-wrapper"
+      class="ant-col ant-form-item-control-wrapper"
     >
       <div
         class="ant-form-item-control"
@@ -62,7 +62,7 @@ exports[`Form should props colon of Form.Item override the props colon of Form.
     class="ant-row ant-form-item"
   >
     <div
-      class="ant-form-item-label"
+      class="ant-col ant-form-item-label"
     >
       <label
         class="ant-form-item-no-colon"
@@ -72,7 +72,7 @@ exports[`Form should props colon of Form.Item override the props colon of Form.
       </label>
     </div>
     <div
-      class="ant-form-item-control-wrapper"
+      class="ant-col ant-form-item-control-wrapper"
     >
       <div
         class="ant-form-item-control"
diff --git a/components/form/__tests__/__snapshots__/message.test.js.snap b/components/form/__tests__/__snapshots__/message.test.js.snap
index a989c8557d..6d8a04c304 100644
--- a/components/form/__tests__/__snapshots__/message.test.js.snap
+++ b/components/form/__tests__/__snapshots__/message.test.js.snap
@@ -8,7 +8,7 @@ exports[`Form should display custom message 1`] = `
     class="ant-row ant-form-item ant-form-item-with-help"
   >
     <div
-      class="ant-form-item-label"
+      class="ant-col ant-form-item-label"
     >
       <label
         class=""
@@ -19,7 +19,7 @@ exports[`Form should display custom message 1`] = `
       </label>
     </div>
     <div
-      class="ant-form-item-control-wrapper"
+      class="ant-col ant-form-item-control-wrapper"
     >
       <div
         class="ant-form-item-control has-error"
@@ -62,7 +62,7 @@ exports[`Form should display two message 1`] = `
     class="ant-row ant-form-item ant-form-item-with-help"
   >
     <div
-      class="ant-form-item-label"
+      class="ant-col ant-form-item-label"
     >
       <label
         class=""
@@ -73,7 +73,7 @@ exports[`Form should display two message 1`] = `
       </label>
     </div>
     <div
-      class="ant-form-item-control-wrapper"
+      class="ant-col ant-form-item-control-wrapper"
     >
       <div
         class="ant-form-item-control has-error"
@@ -107,7 +107,7 @@ exports[`Form support error message with reactNode 1`] = `
     class="ant-row ant-form-item ant-form-item-with-help"
   >
     <div
-      class="ant-form-item-label"
+      class="ant-col ant-form-item-label"
     >
       <label
         class=""
@@ -118,7 +118,7 @@ exports[`Form support error message with reactNode 1`] = `
       </label>
     </div>
     <div
-      class="ant-form-item-control-wrapper"
+      class="ant-col ant-form-item-control-wrapper"
     >
       <div
         class="ant-form-item-control has-error"
diff --git a/components/grid/__tests__/__snapshots__/demo.test.js.snap b/components/grid/__tests__/__snapshots__/demo.test.js.snap
index 0a039ed26c..2b38e970a7 100644
--- a/components/grid/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/grid/__tests__/__snapshots__/demo.test.js.snap
@@ -6,12 +6,12 @@ exports[`renders ./components/grid/demo/basic.md correctly 1`] = `
     class="ant-row"
   >
     <div
-      class="ant-col-12"
+      class="ant-col ant-col-12"
     >
       col-12
     </div>
     <div
-      class="ant-col-12"
+      class="ant-col ant-col-12"
     >
       col-12
     </div>
@@ -20,17 +20,17 @@ exports[`renders ./components/grid/demo/basic.md correctly 1`] = `
     class="ant-row"
   >
     <div
-      class="ant-col-8"
+      class="ant-col ant-col-8"
     >
       col-8
     </div>
     <div
-      class="ant-col-8"
+      class="ant-col ant-col-8"
     >
       col-8
     </div>
     <div
-      class="ant-col-8"
+      class="ant-col ant-col-8"
     >
       col-8
     </div>
@@ -39,22 +39,22 @@ exports[`renders ./components/grid/demo/basic.md correctly 1`] = `
     class="ant-row"
   >
     <div
-      class="ant-col-6"
+      class="ant-col ant-col-6"
     >
       col-6
     </div>
     <div
-      class="ant-col-6"
+      class="ant-col ant-col-6"
     >
       col-6
     </div>
     <div
-      class="ant-col-6"
+      class="ant-col ant-col-6"
     >
       col-6
     </div>
     <div
-      class="ant-col-6"
+      class="ant-col ant-col-6"
     >
       col-6
     </div>
@@ -71,22 +71,22 @@ exports[`renders ./components/grid/demo/flex.md correctly 1`] = `
     class="ant-row-flex ant-row-flex-start"
   >
     <div
-      class="ant-col-4"
+      class="ant-col ant-col-4"
     >
       col-4
     </div>
     <div
-      class="ant-col-4"
+      class="ant-col ant-col-4"
     >
       col-4
     </div>
     <div
-      class="ant-col-4"
+      class="ant-col ant-col-4"
     >
       col-4
     </div>
     <div
-      class="ant-col-4"
+      class="ant-col ant-col-4"
     >
       col-4
     </div>
@@ -98,22 +98,22 @@ exports[`renders ./components/grid/demo/flex.md correctly 1`] = `
     class="ant-row-flex ant-row-flex-center"
   >
     <div
-      class="ant-col-4"
+      class="ant-col ant-col-4"
     >
       col-4
     </div>
     <div
-      class="ant-col-4"
+      class="ant-col ant-col-4"
     >
       col-4
     </div>
     <div
-      class="ant-col-4"
+      class="ant-col ant-col-4"
     >
       col-4
     </div>
     <div
-      class="ant-col-4"
+      class="ant-col ant-col-4"
     >
       col-4
     </div>
@@ -125,22 +125,22 @@ exports[`renders ./components/grid/demo/flex.md correctly 1`] = `
     class="ant-row-flex ant-row-flex-end"
   >
     <div
-      class="ant-col-4"
+      class="ant-col ant-col-4"
     >
       col-4
     </div>
     <div
-      class="ant-col-4"
+      class="ant-col ant-col-4"
     >
       col-4
     </div>
     <div
-      class="ant-col-4"
+      class="ant-col ant-col-4"
     >
       col-4
     </div>
     <div
-      class="ant-col-4"
+      class="ant-col ant-col-4"
     >
       col-4
     </div>
@@ -152,22 +152,22 @@ exports[`renders ./components/grid/demo/flex.md correctly 1`] = `
     class="ant-row-flex ant-row-flex-space-between"
   >
     <div
-      class="ant-col-4"
+      class="ant-col ant-col-4"
     >
       col-4
     </div>
     <div
-      class="ant-col-4"
+      class="ant-col ant-col-4"
     >
       col-4
     </div>
     <div
-      class="ant-col-4"
+      class="ant-col ant-col-4"
     >
       col-4
     </div>
     <div
-      class="ant-col-4"
+      class="ant-col ant-col-4"
     >
       col-4
     </div>
@@ -179,22 +179,22 @@ exports[`renders ./components/grid/demo/flex.md correctly 1`] = `
     class="ant-row-flex ant-row-flex-space-around"
   >
     <div
-      class="ant-col-4"
+      class="ant-col ant-col-4"
     >
       col-4
     </div>
     <div
-      class="ant-col-4"
+      class="ant-col ant-col-4"
     >
       col-4
     </div>
     <div
-      class="ant-col-4"
+      class="ant-col ant-col-4"
     >
       col-4
     </div>
     <div
-      class="ant-col-4"
+      class="ant-col ant-col-4"
     >
       col-4
     </div>
@@ -211,7 +211,7 @@ exports[`renders ./components/grid/demo/flex-align.md correctly 1`] = `
     class="ant-row-flex ant-row-flex-center ant-row-flex-top"
   >
     <div
-      class="ant-col-4"
+      class="ant-col ant-col-4"
     >
       <p
         class="height-100"
@@ -220,7 +220,7 @@ exports[`renders ./components/grid/demo/flex-align.md correctly 1`] = `
       </p>
     </div>
     <div
-      class="ant-col-4"
+      class="ant-col ant-col-4"
     >
       <p
         class="height-50"
@@ -229,7 +229,7 @@ exports[`renders ./components/grid/demo/flex-align.md correctly 1`] = `
       </p>
     </div>
     <div
-      class="ant-col-4"
+      class="ant-col ant-col-4"
     >
       <p
         class="height-120"
@@ -238,7 +238,7 @@ exports[`renders ./components/grid/demo/flex-align.md correctly 1`] = `
       </p>
     </div>
     <div
-      class="ant-col-4"
+      class="ant-col ant-col-4"
     >
       <p
         class="height-80"
@@ -254,7 +254,7 @@ exports[`renders ./components/grid/demo/flex-align.md correctly 1`] = `
     class="ant-row-flex ant-row-flex-space-around ant-row-flex-middle"
   >
     <div
-      class="ant-col-4"
+      class="ant-col ant-col-4"
     >
       <p
         class="height-100"
@@ -263,7 +263,7 @@ exports[`renders ./components/grid/demo/flex-align.md correctly 1`] = `
       </p>
     </div>
     <div
-      class="ant-col-4"
+      class="ant-col ant-col-4"
     >
       <p
         class="height-50"
@@ -272,7 +272,7 @@ exports[`renders ./components/grid/demo/flex-align.md correctly 1`] = `
       </p>
     </div>
     <div
-      class="ant-col-4"
+      class="ant-col ant-col-4"
     >
       <p
         class="height-120"
@@ -281,7 +281,7 @@ exports[`renders ./components/grid/demo/flex-align.md correctly 1`] = `
       </p>
     </div>
     <div
-      class="ant-col-4"
+      class="ant-col ant-col-4"
     >
       <p
         class="height-80"
@@ -297,7 +297,7 @@ exports[`renders ./components/grid/demo/flex-align.md correctly 1`] = `
     class="ant-row-flex ant-row-flex-space-between ant-row-flex-bottom"
   >
     <div
-      class="ant-col-4"
+      class="ant-col ant-col-4"
     >
       <p
         class="height-100"
@@ -306,7 +306,7 @@ exports[`renders ./components/grid/demo/flex-align.md correctly 1`] = `
       </p>
     </div>
     <div
-      class="ant-col-4"
+      class="ant-col ant-col-4"
     >
       <p
         class="height-50"
@@ -315,7 +315,7 @@ exports[`renders ./components/grid/demo/flex-align.md correctly 1`] = `
       </p>
     </div>
     <div
-      class="ant-col-4"
+      class="ant-col ant-col-4"
     >
       <p
         class="height-120"
@@ -324,7 +324,7 @@ exports[`renders ./components/grid/demo/flex-align.md correctly 1`] = `
       </p>
     </div>
     <div
-      class="ant-col-4"
+      class="ant-col ant-col-4"
     >
       <p
         class="height-80"
@@ -342,22 +342,22 @@ exports[`renders ./components/grid/demo/flex-order.md correctly 1`] = `
     class="ant-row-flex"
   >
     <div
-      class="ant-col-6 ant-col-order-4"
+      class="ant-col ant-col-6 ant-col-order-4"
     >
       1 col-order-4
     </div>
     <div
-      class="ant-col-6 ant-col-order-3"
+      class="ant-col ant-col-6 ant-col-order-3"
     >
       2 col-order-3
     </div>
     <div
-      class="ant-col-6 ant-col-order-2"
+      class="ant-col ant-col-6 ant-col-order-2"
     >
       3 col-order-2
     </div>
     <div
-      class="ant-col-6 ant-col-order-1"
+      class="ant-col ant-col-6 ant-col-order-1"
     >
       4 col-order-1
     </div>
@@ -374,7 +374,7 @@ exports[`renders ./components/grid/demo/gutter.md correctly 1`] = `
     style="margin-left:-8px;margin-right:-8px"
   >
     <div
-      class="ant-col-6 gutter-row"
+      class="ant-col ant-col-6 gutter-row"
       style="padding-left:8px;padding-right:8px"
     >
       <div
@@ -384,7 +384,7 @@ exports[`renders ./components/grid/demo/gutter.md correctly 1`] = `
       </div>
     </div>
     <div
-      class="ant-col-6 gutter-row"
+      class="ant-col ant-col-6 gutter-row"
       style="padding-left:8px;padding-right:8px"
     >
       <div
@@ -394,7 +394,7 @@ exports[`renders ./components/grid/demo/gutter.md correctly 1`] = `
       </div>
     </div>
     <div
-      class="ant-col-6 gutter-row"
+      class="ant-col ant-col-6 gutter-row"
       style="padding-left:8px;padding-right:8px"
     >
       <div
@@ -404,7 +404,7 @@ exports[`renders ./components/grid/demo/gutter.md correctly 1`] = `
       </div>
     </div>
     <div
-      class="ant-col-6 gutter-row"
+      class="ant-col ant-col-6 gutter-row"
       style="padding-left:8px;padding-right:8px"
     >
       <div
@@ -423,12 +423,12 @@ exports[`renders ./components/grid/demo/offset.md correctly 1`] = `
     class="ant-row"
   >
     <div
-      class="ant-col-8"
+      class="ant-col ant-col-8"
     >
       col-8
     </div>
     <div
-      class="ant-col-8 ant-col-offset-8"
+      class="ant-col ant-col-8 ant-col-offset-8"
     >
       col-8
     </div>
@@ -437,12 +437,12 @@ exports[`renders ./components/grid/demo/offset.md correctly 1`] = `
     class="ant-row"
   >
     <div
-      class="ant-col-6 ant-col-offset-6"
+      class="ant-col ant-col-6 ant-col-offset-6"
     >
       col-6 col-offset-6
     </div>
     <div
-      class="ant-col-6 ant-col-offset-6"
+      class="ant-col ant-col-6 ant-col-offset-6"
     >
       col-6 col-offset-6
     </div>
@@ -451,7 +451,7 @@ exports[`renders ./components/grid/demo/offset.md correctly 1`] = `
     class="ant-row"
   >
     <div
-      class="ant-col-12 ant-col-offset-6"
+      class="ant-col ant-col-12 ant-col-offset-6"
     >
       col-12 col-offset-6
     </div>
@@ -666,7 +666,7 @@ exports[`renders ./components/grid/demo/playground.md correctly 1`] = `
     style="margin-left:-8px;margin-right:-8px"
   >
     <div
-      class="ant-col-6"
+      class="ant-col ant-col-6"
       style="padding-left:8px;padding-right:8px"
     >
       <div>
@@ -674,7 +674,7 @@ exports[`renders ./components/grid/demo/playground.md correctly 1`] = `
       </div>
     </div>
     <div
-      class="ant-col-6"
+      class="ant-col ant-col-6"
       style="padding-left:8px;padding-right:8px"
     >
       <div>
@@ -682,7 +682,7 @@ exports[`renders ./components/grid/demo/playground.md correctly 1`] = `
       </div>
     </div>
     <div
-      class="ant-col-6"
+      class="ant-col ant-col-6"
       style="padding-left:8px;padding-right:8px"
     >
       <div>
@@ -690,7 +690,7 @@ exports[`renders ./components/grid/demo/playground.md correctly 1`] = `
       </div>
     </div>
     <div
-      class="ant-col-6"
+      class="ant-col ant-col-6"
       style="padding-left:8px;padding-right:8px"
     >
       <div>
@@ -714,17 +714,17 @@ exports[`renders ./components/grid/demo/responsive.md correctly 1`] = `
   class="ant-row"
 >
   <div
-    class="ant-col-xs-2 ant-col-sm-4 ant-col-md-6 ant-col-lg-8 ant-col-xl-10"
+    class="ant-col ant-col-xs-2 ant-col-sm-4 ant-col-md-6 ant-col-lg-8 ant-col-xl-10"
   >
     Col
   </div>
   <div
-    class="ant-col-xs-20 ant-col-sm-16 ant-col-md-12 ant-col-lg-8 ant-col-xl-4"
+    class="ant-col ant-col-xs-20 ant-col-sm-16 ant-col-md-12 ant-col-lg-8 ant-col-xl-4"
   >
     Col
   </div>
   <div
-    class="ant-col-xs-2 ant-col-sm-4 ant-col-md-6 ant-col-lg-8 ant-col-xl-10"
+    class="ant-col ant-col-xs-2 ant-col-sm-4 ant-col-md-6 ant-col-lg-8 ant-col-xl-10"
   >
     Col
   </div>
@@ -736,17 +736,17 @@ exports[`renders ./components/grid/demo/responsive-more.md correctly 1`] = `
   class="ant-row"
 >
   <div
-    class="ant-col-xs-5 ant-col-xs-offset-1 ant-col-lg-6 ant-col-lg-offset-2"
+    class="ant-col ant-col-xs-5 ant-col-xs-offset-1 ant-col-lg-6 ant-col-lg-offset-2"
   >
     Col
   </div>
   <div
-    class="ant-col-xs-11 ant-col-xs-offset-1 ant-col-lg-6 ant-col-lg-offset-2"
+    class="ant-col ant-col-xs-11 ant-col-xs-offset-1 ant-col-lg-6 ant-col-lg-offset-2"
   >
     Col
   </div>
   <div
-    class="ant-col-xs-5 ant-col-xs-offset-1 ant-col-lg-6 ant-col-lg-offset-2"
+    class="ant-col ant-col-xs-5 ant-col-xs-offset-1 ant-col-lg-6 ant-col-lg-offset-2"
   >
     Col
   </div>
@@ -759,12 +759,12 @@ exports[`renders ./components/grid/demo/sort.md correctly 1`] = `
     class="ant-row"
   >
     <div
-      class="ant-col-18 ant-col-push-6"
+      class="ant-col ant-col-18 ant-col-push-6"
     >
       col-18 col-push-6
     </div>
     <div
-      class="ant-col-6 ant-col-pull-18"
+      class="ant-col ant-col-6 ant-col-pull-18"
     >
       col-6 col-pull-18
     </div>
diff --git a/components/grid/__tests__/__snapshots__/index.test.js.snap b/components/grid/__tests__/__snapshots__/index.test.js.snap
index ef8a47c191..0cbca3bbcd 100644
--- a/components/grid/__tests__/__snapshots__/index.test.js.snap
+++ b/components/grid/__tests__/__snapshots__/index.test.js.snap
@@ -7,12 +7,12 @@ exports[`Grid renders wrapped Col correctly 1`] = `
 >
   <div>
     <div
-      class="ant-col-12"
+      class="ant-col ant-col-12"
       style="padding-left:10px;padding-right:10px"
     />
   </div>
   <div
-    class="ant-col-12"
+    class="ant-col ant-col-12"
     style="padding-left:10px;padding-right:10px"
   />
 </div>
@@ -20,7 +20,7 @@ exports[`Grid renders wrapped Col correctly 1`] = `
 
 exports[`Grid should render Col 1`] = `
 <div
-  class="ant-col-2"
+  class="ant-col ant-col-2"
 />
 `;
 
diff --git a/components/grid/col.tsx b/components/grid/col.tsx
index 92238eb997..aba801d9d6 100644
--- a/components/grid/col.tsx
+++ b/components/grid/col.tsx
@@ -85,6 +85,7 @@ export default class Col extends React.Component<ColProps, {}> {
       };
     });
     const classes = classNames(
+      prefixCls,
       {
         [`${prefixCls}-${span}`]: span !== undefined,
         [`${prefixCls}-order-${order}`]: order,
diff --git a/components/grid/style/index.less b/components/grid/style/index.less
index c517f1ba9e..97087aa223 100644
--- a/components/grid/style/index.less
+++ b/components/grid/style/index.less
@@ -61,7 +61,6 @@
 
 .@{ant-prefix}-col {
   position: relative;
-  display: block;
 }
 
 .make-grid-columns();
diff --git a/components/input/__tests__/__snapshots__/demo.test.js.snap b/components/input/__tests__/__snapshots__/demo.test.js.snap
index 0e820d3633..a0fe50d4a5 100644
--- a/components/input/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/input/__tests__/__snapshots__/demo.test.js.snap
@@ -249,7 +249,7 @@ exports[`renders ./components/input/demo/group.md correctly 1`] = `
       style="margin-left:-4px;margin-right:-4px"
     >
       <div
-        class="ant-col-5"
+        class="ant-col ant-col-5"
         style="padding-left:4px;padding-right:4px"
       >
         <input
@@ -259,7 +259,7 @@ exports[`renders ./components/input/demo/group.md correctly 1`] = `
         />
       </div>
       <div
-        class="ant-col-8"
+        class="ant-col ant-col-8"
         style="padding-left:4px;padding-right:4px"
       >
         <input
diff --git a/components/list/__tests__/__snapshots__/demo.test.js.snap b/components/list/__tests__/__snapshots__/demo.test.js.snap
index 75b498e374..fbf45f6996 100644
--- a/components/list/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/list/__tests__/__snapshots__/demo.test.js.snap
@@ -178,7 +178,7 @@ exports[`renders ./components/list/demo/grid.md correctly 1`] = `
         style="margin-left:-8px;margin-right:-8px"
       >
         <div
-          class="ant-col-6"
+          class="ant-col ant-col-6"
           style="padding-left:8px;padding-right:8px"
         >
           <div
@@ -209,7 +209,7 @@ exports[`renders ./components/list/demo/grid.md correctly 1`] = `
           </div>
         </div>
         <div
-          class="ant-col-6"
+          class="ant-col ant-col-6"
           style="padding-left:8px;padding-right:8px"
         >
           <div
@@ -240,7 +240,7 @@ exports[`renders ./components/list/demo/grid.md correctly 1`] = `
           </div>
         </div>
         <div
-          class="ant-col-6"
+          class="ant-col ant-col-6"
           style="padding-left:8px;padding-right:8px"
         >
           <div
@@ -271,7 +271,7 @@ exports[`renders ./components/list/demo/grid.md correctly 1`] = `
           </div>
         </div>
         <div
-          class="ant-col-6"
+          class="ant-col ant-col-6"
           style="padding-left:8px;padding-right:8px"
         >
           <div
@@ -418,7 +418,7 @@ exports[`renders ./components/list/demo/resposive.md correctly 1`] = `
         style="margin-left:-8px;margin-right:-8px"
       >
         <div
-          class="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 ant-col-xs-24 ant-col-sm-12 ant-col-md-6 ant-col-lg-6 ant-col-xl-4 ant-col-xxl-8"
           style="padding-left:8px;padding-right:8px"
         >
           <div
@@ -449,7 +449,7 @@ exports[`renders ./components/list/demo/resposive.md correctly 1`] = `
           </div>
         </div>
         <div
-          class="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 ant-col-xs-24 ant-col-sm-12 ant-col-md-6 ant-col-lg-6 ant-col-xl-4 ant-col-xxl-8"
           style="padding-left:8px;padding-right:8px"
         >
           <div
@@ -480,7 +480,7 @@ exports[`renders ./components/list/demo/resposive.md correctly 1`] = `
           </div>
         </div>
         <div
-          class="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 ant-col-xs-24 ant-col-sm-12 ant-col-md-6 ant-col-lg-6 ant-col-xl-4 ant-col-xxl-8"
           style="padding-left:8px;padding-right:8px"
         >
           <div
@@ -511,7 +511,7 @@ exports[`renders ./components/list/demo/resposive.md correctly 1`] = `
           </div>
         </div>
         <div
-          class="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 ant-col-xs-24 ant-col-sm-12 ant-col-md-6 ant-col-lg-6 ant-col-xl-4 ant-col-xxl-8"
           style="padding-left:8px;padding-right:8px"
         >
           <div
@@ -542,7 +542,7 @@ exports[`renders ./components/list/demo/resposive.md correctly 1`] = `
           </div>
         </div>
         <div
-          class="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 ant-col-xs-24 ant-col-sm-12 ant-col-md-6 ant-col-lg-6 ant-col-xl-4 ant-col-xxl-8"
           style="padding-left:8px;padding-right:8px"
         >
           <div
@@ -573,7 +573,7 @@ exports[`renders ./components/list/demo/resposive.md correctly 1`] = `
           </div>
         </div>
         <div
-          class="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 ant-col-xs-24 ant-col-sm-12 ant-col-md-6 ant-col-lg-6 ant-col-xl-4 ant-col-xxl-8"
           style="padding-left:8px;padding-right:8px"
         >
           <div
diff --git a/components/mention/__tests__/__snapshots__/demo.test.js.snap b/components/mention/__tests__/__snapshots__/demo.test.js.snap
index 0357b91d8f..04e5c3bc8a 100644
--- a/components/mention/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/mention/__tests__/__snapshots__/demo.test.js.snap
@@ -257,7 +257,7 @@ exports[`renders ./components/mention/demo/controlled.md correctly 1`] = `
     class="ant-row ant-form-item"
   >
     <div
-      class="ant-col-6 ant-form-item-label"
+      class="ant-col ant-col-6 ant-form-item-label"
     >
       <label
         class=""
@@ -268,7 +268,7 @@ exports[`renders ./components/mention/demo/controlled.md correctly 1`] = `
       </label>
     </div>
     <div
-      class="ant-col-16 ant-form-item-control-wrapper"
+      class="ant-col ant-col-16 ant-form-item-control-wrapper"
     >
       <div
         class="ant-form-item-control has-success"
@@ -343,7 +343,7 @@ exports[`renders ./components/mention/demo/controlled.md correctly 1`] = `
     class="ant-row ant-form-item"
   >
     <div
-      class="ant-col-14 ant-col-offset-6 ant-form-item-control-wrapper"
+      class="ant-col ant-col-14 ant-col-offset-6 ant-form-item-control-wrapper"
     >
       <div
         class="ant-form-item-control"
diff --git a/components/page-header/__tests__/__snapshots__/demo.test.js.snap b/components/page-header/__tests__/__snapshots__/demo.test.js.snap
index 8c7e25427d..a1004d0290 100644
--- a/components/page-header/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/page-header/__tests__/__snapshots__/demo.test.js.snap
@@ -93,7 +93,7 @@ exports[`renders ./components/page-header/demo/actions.md correctly 1`] = `
           class="ant-row"
         >
           <div
-            class="ant-col-12"
+            class="ant-col ant-col-12"
           >
             <div
               class="description"
@@ -111,7 +111,7 @@ exports[`renders ./components/page-header/demo/actions.md correctly 1`] = `
             </div>
           </div>
           <div
-            class="ant-col-12"
+            class="ant-col ant-col-12"
           >
             <div
               class="description"
@@ -131,7 +131,7 @@ exports[`renders ./components/page-header/demo/actions.md correctly 1`] = `
             </div>
           </div>
           <div
-            class="ant-col-12"
+            class="ant-col ant-col-12"
           >
             <div
               class="description"
@@ -149,7 +149,7 @@ exports[`renders ./components/page-header/demo/actions.md correctly 1`] = `
             </div>
           </div>
           <div
-            class="ant-col-12"
+            class="ant-col ant-col-12"
           >
             <div
               class="description"
@@ -167,7 +167,7 @@ exports[`renders ./components/page-header/demo/actions.md correctly 1`] = `
             </div>
           </div>
           <div
-            class="ant-col-24"
+            class="ant-col ant-col-24"
           >
             <div
               class="description"
@@ -193,7 +193,7 @@ exports[`renders ./components/page-header/demo/actions.md correctly 1`] = `
           class="ant-row"
         >
           <div
-            class="ant-col-12"
+            class="ant-col ant-col-12"
           >
             <div
               class="ant-statistic"
@@ -215,7 +215,7 @@ exports[`renders ./components/page-header/demo/actions.md correctly 1`] = `
             </div>
           </div>
           <div
-            class="ant-col-12"
+            class="ant-col ant-col-12"
           >
             <div
               class="ant-statistic"
diff --git a/components/slider/__tests__/__snapshots__/demo.test.js.snap b/components/slider/__tests__/__snapshots__/demo.test.js.snap
index 4c80bc72ab..af341396b3 100644
--- a/components/slider/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/slider/__tests__/__snapshots__/demo.test.js.snap
@@ -227,7 +227,7 @@ exports[`renders ./components/slider/demo/input-number.md correctly 1`] = `
     class="ant-row"
   >
     <div
-      class="ant-col-12"
+      class="ant-col ant-col-12"
     >
       <div
         class="ant-slider"
@@ -258,7 +258,7 @@ exports[`renders ./components/slider/demo/input-number.md correctly 1`] = `
       </div>
     </div>
     <div
-      class="ant-col-4"
+      class="ant-col ant-col-4"
     >
       <div
         class="ant-input-number"
@@ -343,7 +343,7 @@ exports[`renders ./components/slider/demo/input-number.md correctly 1`] = `
     class="ant-row"
   >
     <div
-      class="ant-col-12"
+      class="ant-col ant-col-12"
     >
       <div
         class="ant-slider"
@@ -374,7 +374,7 @@ exports[`renders ./components/slider/demo/input-number.md correctly 1`] = `
       </div>
     </div>
     <div
-      class="ant-col-4"
+      class="ant-col ant-col-4"
     >
       <div
         class="ant-input-number"
diff --git a/components/statistic/__tests__/__snapshots__/demo.test.js.snap b/components/statistic/__tests__/__snapshots__/demo.test.js.snap
index 2d5c35209e..75ce020e7e 100644
--- a/components/statistic/__tests__/__snapshots__/demo.test.js.snap
+++ b/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-12"
+    class="ant-col ant-col-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-12"
+    class="ant-col ant-col-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-12"
+      class="ant-col ant-col-12"
       style="padding-left:8px;padding-right:8px"
     >
       <div
@@ -153,7 +153,7 @@ exports[`renders ./components/statistic/demo/card.md correctly 1`] = `
       </div>
     </div>
     <div
-      class="ant-col-12"
+      class="ant-col ant-col-12"
       style="padding-left:8px;padding-right:8px"
     >
       <div
@@ -230,7 +230,7 @@ exports[`renders ./components/statistic/demo/countdown.md correctly 1`] = `
   style="margin-left:-8px;margin-right:-8px"
 >
   <div
-    class="ant-col-12"
+    class="ant-col ant-col-12"
     style="padding-left:8px;padding-right:8px"
   >
     <div
@@ -253,7 +253,7 @@ exports[`renders ./components/statistic/demo/countdown.md correctly 1`] = `
     </div>
   </div>
   <div
-    class="ant-col-12"
+    class="ant-col ant-col-12"
     style="padding-left:8px;padding-right:8px"
   >
     <div
@@ -276,7 +276,7 @@ exports[`renders ./components/statistic/demo/countdown.md correctly 1`] = `
     </div>
   </div>
   <div
-    class="ant-col-24"
+    class="ant-col ant-col-24"
     style="padding-left:8px;padding-right:8px;margin-top:32px"
   >
     <div
@@ -307,7 +307,7 @@ exports[`renders ./components/statistic/demo/unit.md correctly 1`] = `
   style="margin-left:-8px;margin-right:-8px"
 >
   <div
-    class="ant-col-12"
+    class="ant-col ant-col-12"
     style="padding-left:8px;padding-right:8px"
   >
     <div
@@ -356,7 +356,7 @@ exports[`renders ./components/statistic/demo/unit.md correctly 1`] = `
     </div>
   </div>
   <div
-    class="ant-col-12"
+    class="ant-col ant-col-12"
     style="padding-left:8px;padding-right:8px"
   >
     <div
diff --git a/components/table/__tests__/__snapshots__/demo.test.js.snap b/components/table/__tests__/__snapshots__/demo.test.js.snap
index d2dc5daf12..c23f78b1a8 100755
--- a/components/table/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/table/__tests__/__snapshots__/demo.test.js.snap
@@ -1632,7 +1632,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
         class="ant-row ant-form-item"
       >
         <div
-          class="ant-form-item-label"
+          class="ant-col ant-form-item-label"
         >
           <label
             class=""
@@ -1642,7 +1642,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
           </label>
         </div>
         <div
-          class="ant-form-item-control-wrapper"
+          class="ant-col ant-form-item-control-wrapper"
         >
           <div
             class="ant-form-item-control"
@@ -1668,7 +1668,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
         class="ant-row ant-form-item"
       >
         <div
-          class="ant-form-item-label"
+          class="ant-col ant-form-item-label"
         >
           <label
             class=""
@@ -1678,7 +1678,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
           </label>
         </div>
         <div
-          class="ant-form-item-control-wrapper"
+          class="ant-col ant-form-item-control-wrapper"
         >
           <div
             class="ant-form-item-control"
@@ -1704,7 +1704,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
         class="ant-row ant-form-item"
       >
         <div
-          class="ant-form-item-label"
+          class="ant-col ant-form-item-label"
         >
           <label
             class=""
@@ -1714,7 +1714,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
           </label>
         </div>
         <div
-          class="ant-form-item-control-wrapper"
+          class="ant-col ant-form-item-control-wrapper"
         >
           <div
             class="ant-form-item-control"
@@ -1740,7 +1740,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
         class="ant-row ant-form-item"
       >
         <div
-          class="ant-form-item-label"
+          class="ant-col ant-form-item-label"
         >
           <label
             class=""
@@ -1750,7 +1750,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
           </label>
         </div>
         <div
-          class="ant-form-item-control-wrapper"
+          class="ant-col ant-form-item-control-wrapper"
         >
           <div
             class="ant-form-item-control"
@@ -1777,7 +1777,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
         class="ant-row ant-form-item"
       >
         <div
-          class="ant-form-item-label"
+          class="ant-col ant-form-item-label"
         >
           <label
             class=""
@@ -1787,7 +1787,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
           </label>
         </div>
         <div
-          class="ant-form-item-control-wrapper"
+          class="ant-col ant-form-item-control-wrapper"
         >
           <div
             class="ant-form-item-control"
@@ -1814,7 +1814,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
         class="ant-row ant-form-item"
       >
         <div
-          class="ant-form-item-label"
+          class="ant-col ant-form-item-label"
         >
           <label
             class=""
@@ -1824,7 +1824,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
           </label>
         </div>
         <div
-          class="ant-form-item-control-wrapper"
+          class="ant-col ant-form-item-control-wrapper"
         >
           <div
             class="ant-form-item-control"
@@ -1851,7 +1851,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
         class="ant-row ant-form-item"
       >
         <div
-          class="ant-form-item-label"
+          class="ant-col ant-form-item-label"
         >
           <label
             class=""
@@ -1861,7 +1861,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
           </label>
         </div>
         <div
-          class="ant-form-item-control-wrapper"
+          class="ant-col ant-form-item-control-wrapper"
         >
           <div
             class="ant-form-item-control"
@@ -1888,7 +1888,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
         class="ant-row ant-form-item"
       >
         <div
-          class="ant-form-item-label"
+          class="ant-col ant-form-item-label"
         >
           <label
             class=""
@@ -1898,7 +1898,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
           </label>
         </div>
         <div
-          class="ant-form-item-control-wrapper"
+          class="ant-col ant-form-item-control-wrapper"
         >
           <div
             class="ant-form-item-control"
@@ -1924,7 +1924,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
         class="ant-row ant-form-item"
       >
         <div
-          class="ant-form-item-label"
+          class="ant-col ant-form-item-label"
         >
           <label
             class=""
@@ -1934,7 +1934,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
           </label>
         </div>
         <div
-          class="ant-form-item-control-wrapper"
+          class="ant-col ant-form-item-control-wrapper"
         >
           <div
             class="ant-form-item-control"
@@ -1961,7 +1961,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
         class="ant-row ant-form-item"
       >
         <div
-          class="ant-form-item-label"
+          class="ant-col ant-form-item-label"
         >
           <label
             class=""
@@ -1971,7 +1971,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
           </label>
         </div>
         <div
-          class="ant-form-item-control-wrapper"
+          class="ant-col ant-form-item-control-wrapper"
         >
           <div
             class="ant-form-item-control"
@@ -2049,7 +2049,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
         class="ant-row ant-form-item"
       >
         <div
-          class="ant-form-item-label"
+          class="ant-col ant-form-item-label"
         >
           <label
             class=""
@@ -2059,7 +2059,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
           </label>
         </div>
         <div
-          class="ant-form-item-control-wrapper"
+          class="ant-col ant-form-item-control-wrapper"
         >
           <div
             class="ant-form-item-control"