在Antd中,可以使用Form.Item组件的labelCol和wrapperCol属性来控制内联表单子项的宽度。
以下是一个示例代码:
import { Form, Input, Button } from 'antd';
const layout = {
labelCol: { span: 8 },
wrapperCol: { span: 16 },
};
const DemoForm = () => {
const onFinish = (values) => {
console.log(values);
};
return (
);
};
export default DemoForm;
在上面的示例中,labelCol属性定义了标签的宽度,wrapperCol属性定义了输入框的宽度。span属性表示占据的栅格数,总共24个栅格。
通过设置labelCol的span为8,wrapperCol的span为16,可以让标签占据页面宽度的1/3,输入框占据页面宽度的2/3。
最后,使用wrapperCol的offset属性可以添加一个偏移量,用于调整表单的布局。
这样,就可以实现Antd内联表单子项的宽度控制。