如何控制row中的form.item labelCol的宽度
时间: 2024-04-10 14:33:56 浏览: 20
要控制Row中的Form.Item的labelCol宽度,您可以使用Col组件来包裹Form.Item,并为labelCol属性设置一个Col组件。通过设置labelCol的span属性,您可以控制label的宽度。
以下是一个示例代码:
```jsx
import { Form, Row, Col, Input, Button } from 'antd';
const MyForm = () => {
return (
<Form>
<Row gutter={16}>
<Col span={12}>
<Form.Item label="Item 1" labelCol={{ span: 6 }}>
<Input />
</Form.Item>
</Col>
<Col span={12}>
<Form.Item label="Item 2" labelCol={{ span: 6 }}>
<Input />
</Form.Item>
</Col>
</Row>
<Button type="primary">Submit</Button>
</Form>
);
};
export default MyForm;
```
在上面的示例中,我们使用了labelCol属性,并为其设置了一个Col组件,通过设置span属性来控制label的宽度。在这里,我们将labelCol的span值设置为6,这意味着label的宽度将占整个Row宽度的1/6。
您可以根据需要调整labelCol的span值以控制label的宽度。
希望这个解决方案对您有所帮助!如果您还有任何问题,请随时提问。