多列栅格式的表单排列方式布局异常

[kqdjacky]

发生问题的环境是：

• antd 版本: 2.5.2
• 操作系统及其版本: Mac OS X, Windows 7
• 浏览器及其版本: Firefox 50.1.0

您做了什么？请提供尽可能详细的重现步骤。

在Modal里面使用Form, Row, Col.
代码如下：

    <Modal {...modalOpts}>
        <Form horizontal>
          <Row>
            <Col span={12}>
              <FormItem label="登录名：" hasFeedback {...formItemLayout}>
                {getFieldDecorator('login_name', {
                  initialValue: item.login_name,
                  rules: [
                    { required: true, message: '登录名未填写' },
                  ],
                })(
                  <Input type="text" />
                )}
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem label="姓名：" hasFeedback {...formItemLayout}>
                {getFieldDecorator('name', {
                  initialValue: item.name
                })(
                  <Input type="text" />
                )}
              </FormItem>
            </Col>
            <Col span={12}>
              {password()}
            </Col>
            <Col span={12}>
              <FormItem label="邮箱：" hasFeedback {...formItemLayout}>
                {
                  getFieldDecorator('email', {
                    initialValue: item.email
                  })(
                    <Input type='text' />
                  )
                }
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem label="电话" hasFeedback {...formItemLayout}>
                {
                  getFieldDecorator('phone', {
                    initialValue: item.phone
                  })(
                    <Input type='text' />
                  )
                }
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem label='移动电话' hasFeedback {...formItemLayout}>
                {
                  getFieldDecorator('telephone', {
                    initialValue: item.telephone
                  })(
                    <Input type='text' />
                  )
                }
              </FormItem>
            </Col>
          </Row>
        </Form>
    </Modal>

您期待的结果是:

一行显示两个formitem.

实际上的结果是:

可重现的在线演示

http://codepen.io/kqdjacky/pen/Ypdybe?editors=0010

[benjycui]

Please provide a re-producible demo: http://codepen.io/benjycui/pen/KgPZrE?editors=001

Please learn how to write readable Markdown, and it's a good habit to preview your comment before submitting.

[kqdjacky]

重现情况请看这里：
http://codepen.io/kqdjacky/pen/Ypdybe?editors=0010

[kqdjacky]

BTW, 在safari上正常显示的

[afc163]

感谢详尽的反馈，很有帮助。

[wangking873]

最近一次antd升级后 我也出现上面问题 应该是高度导致的
自己增加了高度限制才正常
const formItemLayout = {
labelCol: { span: 8 },
wrapperCol: { span: 16 },
style:{ maxHeight:'32px', overflow: 'hidden' },
};