证明中心 antd 形式

Question

这里试图证明：将这个 Antd 表单居中，但是这两个 cols labelCol 和 wrapperCol 跨度似乎阻止了它，删除了它似乎有效的那些列，有没有办法使这个表单居中并且仍然有那些跨度（或者删除 cols 并以其他方式使用它的功能？）？

test1.tsx:

    <div> <Form.Item
        labelCol={{
          span: 2,
        }}
        wrapperCol={{
          span: 14,
        }}
        label="name"
        name="name"
      >
        <Input type="string" />
      </Form.Item>

      <Form.Item
        labelCol={{
          span: 2,
        }}
        wrapperCol={{
          span: 14,
        }}
        label='address'
        name="address"
      >
        <Input type="string" />
      </Form.Item>

      <Form.Item
        labelCol={{
          span: 2,
        }}
        wrapperCol={{
          span: 14,
        }}
        label='businessId'
        name="businessId"
      >
        <Input type="string" />
      </Form.Item>

      <Form.Item
        labelCol={{
          span: 2,
        }}
        wrapperCol={{
          span: 14,
        }}
        label='phone'
        name="phone"
      >
        <Input type="string" />
      </Form.Item>

      <Form.Item
        labelCol={{
          span: 2,
        }}
        wrapperCol={{
          span: 14,
        }}
        label='email'
        name="email"
      >
        <Input type="string" />
      </Form.Item>

      <Form.Item
        labelCol={{
          span: 2,
        }}
        wrapperCol={{
          span: 14,
        }}
        key="sendEmail"
        label='endEmail'
      >
        <input
          type="checkbox"
          id="sendEmailOnDelivery"
          name="sendEmailOnDelivery"
        />
      </Form.Item>

      <Form.Item>
        <Button type="primary" htmlType="submit">
          submmit
        </Button>
      </Form.Item>
    </div>

: 里面 test2.tsx:

<div className="customer">
    <Form name="createCustomer">
      <Test1 />
    </Form>
  </div>

我的css:

.customer {
  display: flex;
  justify-content: center;
}

#createCustomer {
    width: 100%;
}

Answer 1

将createCustomerclass更改为：

#createCustomer {
  width: 75%;
}

以及 labelCol 和 wrapperCol 在 Form.Item 中为：

labelCol={{
    span: 4
}}
wrapperCol={{
    span: 18
}}

在 CodeSandbox 进行演示。

证明中心 antd 形式

justify center antd form

javascript

css

reactjs

antd