antd在form表单中一个row中有两个form.item 希望他们两个不自动换行
时间: 2024-04-10 09:33:52 浏览: 277
您好!对于antd中form表单中的两个Form.Item希望在同一行显示而不自动换行的问题,您可以将它们包裹在一个Row组件中,并使用Col组件来控制每个Form.Item的宽度,从而实现在同一行显示。
以下是一个示例代码:
```jsx
import { Form, Row, Col, Input, Button } from 'antd';
const MyForm = () => {
return (
<Form>
<Row gutter={16}>
<Col span={12}>
<Form.Item label="Item 1">
<Input />
</Form.Item>
</Col>
<Col span={12}>
<Form.Item label="Item 2">
<Input />
</Form.Item>
</Col>
</Row>
<Button type="primary">Submit</Button>
</Form>
);
};
export default MyForm;
```
在上面的示例中,我们使用了Row组件来包裹两个Col组件,通过设置每个Col组件的span属性来控制每个Form.Item的宽度。您可以根据需要自定义宽度比例,例如,如果想要平均分配宽度,可以将span属性设置为12,如果想要不平均分配宽度,可以根据需求设置不同的span值。
希望这个示例能够帮助到您!如果还有其他问题,请随时提问。
阅读全文