diff --git a/components/layout/col.jsx b/components/layout/col.jsx index 56691d36b6..da55c66fd3 100644 --- a/components/layout/col.jsx +++ b/components/layout/col.jsx @@ -31,7 +31,7 @@ const Col = React.createClass({ } sizeClassObj = { ...sizeClassObj, - [`col-${size}-${sizeProps.span}`]: sizeProps.span, + [`col-${size}-${sizeProps.span}`]: sizeProps.span !== undefined, [`col-${size}-order-${sizeProps.order}`]: sizeProps.order, [`col-${size}-offset-${sizeProps.offset}`]: sizeProps.offset, [`col-${size}-push-${sizeProps.push}`]: sizeProps.push, @@ -39,7 +39,7 @@ const Col = React.createClass({ }; }); const classes = classNames({ - [`col-${span}`]: span, + [`col-${span}`]: span !== undefined, [`col-order-${order}`]: order, [`col-offset-${offset}`]: offset, [`col-push-${push}`]: push, diff --git a/components/layout/index.md b/components/layout/index.md index 8fe94a6993..c72e0691c6 100644 --- a/components/layout/index.md +++ b/components/layout/index.md @@ -99,7 +99,7 @@ Ant Design 的布局组件若不能满足你的需求,你也可以直接使用 | 成员 | 说明 | 类型 | 默认值 | |------------|-----------------|--------------------|-------------| -| span | 栅格占位格数 | number | 0 | +| span | 栅格占位格数,为 0 时相当于 `display: none` | number | 无 | | order | 栅格顺序,`flex` 布局模式下有效 | number | 0 | | offset | 栅格左侧的间隔格数,间隔内不可以有栅格 | number | 0 | | push | 栅格向右移动格数 | number | 0 | diff --git a/style/mixins/grid.less b/style/mixins/grid.less index ae825e891c..cf259e448b 100644 --- a/style/mixins/grid.less +++ b/style/mixins/grid.less @@ -32,6 +32,7 @@ .loop-grid-columns(@index, @class) when (@index > 0) { .col@{class}-@{index} { + display: block; width: percentage((@index / @grid-columns)); } .col@{class}-push-@{index} { @@ -49,7 +50,10 @@ .loop-grid-columns((@index - 1), @class); } -.loop-grid-columns(@index) when (@index = 0) { +.loop-grid-columns(@index, @class) when (@index = 0) { + .col@{class}-@{index} { + display: none; + } .col-push-@{index} { left: auto; }