2024-06-21 10:21AM
antd的栅格系统基于24栅格，可以将页面水平方向划分为24等份。
通过合理地分配labelCol和wrapperCol的值，可以实现表单项在水平方向上的自定义布局
eg：
const layout = {
labelCol: { span: 3 },
wrapperCol: { span: 16 },
};
1）labelCol: 这个属性用于指定表单标签在水平方向上占用的格数。在这里,它被设置为 { span: 3 }。这意味着表单标签将占用 3 个栅格单位的宽度。
2）wrapperCol: 这个属性用于指定表单输入项在水平方向上占用的格数。在这里,它被设置为 { span: 16 }。这意味着表单输入项将占用 16 个栅格单位的宽度。
这个布局配置通常会被用在Form和Form.Item组件中，以实现表单的整体布局
<Form {...layout}>
<Form.Item name="username" label="Username">
<Input />
</Form.Item>
{/* 其他表单项 */}
</Form>
Form 组件使用了 layout 对象中定义的布局配置,从而使表单项的标签和输入项能够按照 3:16 的比例进行排布。
登录
请登录后再发表评论。
评论列表:
目前还没有人发表评论