antd里怎么將form放進modal里并使form橫排？

以下是demo代碼：

Modal調(diào)用如下：

 <Modal
              title="發(fā)貨"
              visible={this.state.visible}
              onOk={this.handleOk}
              onCancel={this.handleCancel}
              width={800}
            >
              <WrappedCVForm {...formData} />
            </Modal>

Form定義如下

import React, { Component } from 'react';
import { Form, Input } from 'antd';
const FormItem = Form.Item;


class CVForm extends Component {
  componentDidMount() {
    // To disabled submit button at the beginning.
    this.props.form.validateFields();
  }

  render() {
    const { getFieldDecorator } = this.props.form;

    return (
      <Form layout="horizontal">
        <FormItem
          label="快遞單號"
        >
          {getFieldDecorator('number', {
            rules: [{ required: true }]
          })(
            <Input placeholder='請輸入快遞單號' />
          )}
        </FormItem>
        <FormItem
          label="國家"
        >
          {getFieldDecorator('country', {
            rules: [{ required: false }]
          })(
            <Input disabled />
          )}
        </FormItem>
        <FormItem
          label="郵編"
        >
          {getFieldDecorator('postalCode', {
            rules: [{ required: false }]
          })(
            <Input disabled />
          )}
        </FormItem>
        <FormItem
          label="省份"
        >
          {getFieldDecorator('province', {
            rules: [{ required: false }]
          })(
            <Input disabled />
          )}
        </FormItem>
        <FormItem
          label="城市"
        >
          {getFieldDecorator('city', {
            rules: [{ required: false }]
          })(
            <Input disabled />
          )}
        </FormItem>
        <FormItem
          label="地址"
        >
          {getFieldDecorator('address', {
            rules: [{ required: false }]
          })(
            <Input disabled />
          )}
        </FormItem>
        <FormItem
          label="姓名"
        >
          {getFieldDecorator('name', {
            rules: [{ required: false }]
          })(
            <Input disabled />
          )}
        </FormItem>
        <FormItem
          label="手機"
        >
          {getFieldDecorator('phone', {
            rules: [{ required: false }]
          })(
            <Input disabled />
          )}
        </FormItem>
      </Form>
    );
  }
}

const WrappedCVForm = Form.create({
  mapPropsToFields(props) {
    return {
      country: Form.createFormField({
        ...props.country,
        value: props.country.value,
      }),
      postalCode: Form.createFormField({
        ...props.postalCode,
        value: props.postalCode.value,
      }),
      province: Form.createFormField({
        ...props.province,
        value: props.province.value,
      }),
      city: Form.createFormField({
        ...props.city,
        value: props.city.value,
      }),
      address: Form.createFormField({
        ...props.address,
        value: props.address.value,
      }),
      name: Form.createFormField({
        ...props.name,
        value: props.name.value,
      }),
      phone: Form.createFormField({
        ...props.phone,
        value: props.phone.value,
      })
    };
  }
})(CVForm);
export default WrappedCVForm;

結(jié)果確認(rèn)這樣的：