在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内联表单子项的宽度控制。