Form 表单记录

Form 表单的 labelCol，wrapperCol

翻阅文档赫然清晰说明了它两的用法：

labelCol: label 标签布局，同 组件，设置 span offset 值，如 {span: 3, offset: 12} 或 sm: {span: 3, offset: 12}。你可以通过 Form 的 labelCol 进行统一设置，，不会作用于嵌套 Item。当和 Form 同时设置时，以 Item 为准。

言下之意就是可以下面两种设置：
方法一：

1
2
3
4
5
6
7
<Form

  labelCol={{span:3}}

  wrapperCol={{span:8}}

></Form>

方法二：

1
2
3
4
5
6
7
8
9
10
11
12
13
<Form labelCol={{span:3}} wrapperCol={{span:8}}>
  <Form.Item >
  </Form.Item>
  <Row >
.......
    <Col span={12}>
      <Form.Item labelCol={{span:6}} wrapperCol={{16}}></Form.Item>
    </Col>
    <Col span={12}>
      <Form.Item labelCol={{span:6}} wrapperCol={{16}}></Form.Item>
    </Col>
  </Row>
</Form>

这样设置的样式会是怎么样的呢，其余的都是一行排列，有两个item是排列到一行的，然后两倍的比列去设置他的占比。外层是3和8.内层由于总的宽只是占了一半，所以内层的占比是6和16。

labelCol： label 标签布局，同 组件，设置 span offset 值，如 {span: 3, offset: 12} 或 sm: {span: 3, offset: 12}。你可以通过 Form 的 labelCol 进行统一设置，，不会作用于嵌套 Item。当和 Form 同时设置时，以 Item 为准。

wrapperCol： 需要为输入控件设置布局样式时，使用该属性，用法同 labelCol。你可以通过 Form 的 wrapperCol 进行统一设置，不会作用于嵌套 Item。当和 Form 同时设置时，以 Item 为准。