如何增大form.item之间的距离
时间: 2024-03-27 15:38:54 浏览: 20
您可以通过修改 `Form.Item` 组件的样式来增大组件之间的间距。具体步骤如下:
1. 在 `Form` 组件外部包裹一个 `div` 元素,并为其设置一个自定义的类名,例如 `my-form-wrapper`。
2. 在 CSS 文件中定义该类名的样式,增加 `margin-bottom` 属性的值即可增大组件之间的间距。例如:
```css
.my-form-wrapper .ant-form-item {
margin-bottom: 20px;
}
```
这里将 `margin-bottom` 属性设置为 `20px`,您可以根据实际需求进行调整。
3. 将包裹 `Form` 组件的 `div` 元素的类名设置为 `my-form-wrapper`,即可生效。
完整示例代码:
```jsx
import { Form, Input, Button } from 'antd';
function MyForm() {
return (
<div className="my-form-wrapper">
<Form>
<Form.Item name="username" label="Username">
<Input />
</Form.Item>
<Form.Item name="password" label="Password">
<Input.Password />
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit">Submit</Button>
</Form.Item>
</Form>
</div>
);
}
```
希望能对您有所帮助!
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)