Fix layout responsive

components/form/demo/advanced-search-form.md

@@ -14,7 +14,7 @@ const FormItem = Form.Item;
 ReactDOM.render(
 <Form horizontal className="ant-advanced-search-form">
   <Row gutter={16}>
-    <Col span="8">
+    <Col sm={8}>
       <FormItem
         label="搜索名称："
         labelCol={{ span: 10 }}
@@ -34,7 +34,7 @@ ReactDOM.render(
         <Input placeholder="请输入搜索名称" size="default" />
       </FormItem>
     </Col>
-    <Col span="8">
+    <Col sm={8}>
       <FormItem
         label="搜索名称："
         labelCol={{ span: 10 }}
@@ -54,7 +54,7 @@ ReactDOM.render(
         <Input placeholder="请输入搜索名称" size="default" />
       </FormItem>
     </Col>
-    <Col span="8">
+    <Col sm={8}>
       <FormItem
         label="搜索名称："
         labelCol={{ span: 10 }}
@@ -76,7 +76,7 @@ ReactDOM.render(
     </Col>
   </Row>
   <Row>
-    <Col span="8" offset="16" style={{ textAlign: 'right' }}>
+    <Col span={12} offset={12} style={{ textAlign: 'right' }}>
       <Button type="primary" htmlType="submit">搜索</Button>
       <Button>清除条件</Button>
     </Col>

style/core/layouts.less

@@ -58,8 +58,6 @@
 .col {
   position: relative;
   display: block;
-  float: left;
-  flex: 0 0 auto;
 }
 
 .make-grid-columns();

style/mixins/grid.less

@@ -20,9 +20,8 @@
   .col(@index, @list) when (@index > @grid-columns) {
     @{list} {
       position: relative;
-      display: block;
-      float: left;
-      flex: 0 0 auto;
+      // Prevent columns from collapsing when empty
+      min-height: 1px;
       padding-left:  (@grid-gutter-width / 2);
       padding-right: (@grid-gutter-width / 2);
     }
@@ -30,6 +29,24 @@
   .col(1);
 }
 
+.float-grid-columns(@class) {
+  .col(@index) { // initial
+    @item: ~".col@{class}-@{index}";
+    .col((@index + 1), @item);
+  }
+  .col(@index, @list) when (@index =< @grid-columns) { // general
+    @item: ~".col@{class}-@{index}";
+    .col((@index + 1), ~"@{list}, @{item}");
+  }
+  .col(@index, @list) when (@index > @grid-columns) { // terminal
+    @{list} {
+      float: left;
+      flex: 0 0 auto;
+    }
+  }
+  .col(1); // kickstart it
+}
+
 .loop-grid-columns(@index, @class) when (@index > 0) {
   .col@{class}-@{index} {
     display: block;
@@ -63,5 +80,6 @@
 }
 
 .make-grid(@class: ~'') {
+  .float-grid-columns(@class);
   .loop-grid-columns(@grid-columns, @class);
 }