diff --git a/components/form/demo/advanced-search-form.md b/components/form/demo/advanced-search-form.md index 20fe74232a..6960ca4c96 100644 --- a/components/form/demo/advanced-search-form.md +++ b/components/form/demo/advanced-search-form.md @@ -14,7 +14,7 @@ const FormItem = Form.Item; ReactDOM.render(
- + - + - + - + diff --git a/style/core/layouts.less b/style/core/layouts.less index b9f37edd02..b2b159c282 100644 --- a/style/core/layouts.less +++ b/style/core/layouts.less @@ -58,8 +58,6 @@ .col { position: relative; display: block; - float: left; - flex: 0 0 auto; } .make-grid-columns(); diff --git a/style/mixins/grid.less b/style/mixins/grid.less index cf259e448b..2c81a2829d 100644 --- a/style/mixins/grid.less +++ b/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); }