--- order: 12 title: zh-CN: 表单布局 en-US: Form Layout --- ## zh-CN 表单有三种布局。 ## en-US There are three layout for form: `horizontal`, `vertical`, `inline`. ````jsx import { Form, Input, Button, Radio, } from 'antd'; const FormItem = Form.Item; class FormLayoutDemo extends React.Component { constructor() { super(); this.state = { formLayout: 'horizontal', }; } handleFormLayoutChange = (e) => { this.setState({ formLayout: e.target.value }); } render() { const { formLayout } = this.state; const formItemLayout = formLayout === 'horizontal' ? { labelCol: { span: 4 }, wrapperCol: { span: 14 }, } : null; const buttonItemLayout = formLayout === 'horizontal' ? { wrapperCol: { span: 14, offset: 4 }, } : null; return (