Antd Form 一行多个 Form.Item 组件

在使用 Antd Form 时，当 Form 的宽度很宽，一行只显示一个 input 时，感觉空间有点浪费。 一行能同时显示两个 input 输入框就好了，例如，同时显示：

• 姓名
• 电话

Form 中的示例

<Row gutter={24}>{getFields()}</Row>
      <Row>
        <Col span={24} style={{ textAlign: 'right' }}>
          <Button type="primary" htmlType="submit">
            Search
          </Button>

来自

https://ant.design/components/form-cn/

row col

row col 是 Antd Grid 栅格引入的组件。参考：

https://ant.design/components/grid-cn/

• row：一行为 24 等分
• col: span 控制占用的水平空间，例如 span 为 8 则占三分之一，span 为 24 则占一整行。

gutter 是什么？

gutter 中文翻译是排水沟，槽的意思。

在 Row 组件中设置 gutter 值，即两个 Item 的间距，单位为 px。

简写方式，即水平和垂直方向的间距都是 24px。

<Row gutter={24}>

如果水平和垂直方向需要不同的配置，可以单独指定。第一个参数为水平，第二个参数为垂直。

<Row gutter={[16, 8]}>

示例代码

<Row gutter={18}>
  <Col span={12}>
	<Form.Item name="name" label="用户姓名" rules={[{ required: true }]}>
		<Input />
	</Form.Item>
  </Col>
  <Col span={12}>
	<Form.Item name="tel" label="用户电话" rules={[{ required: true }]}>
		<Input />
	</Form.Item>
  </Col>
</Row>

关于作者 🌱

我是来自山东烟台的一名开发者，有敢兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊， 查看更多联系方式