antd 将form表单中的label换行。form表单中的input框只有border-bottom

修改前：

修改后：

代码片段：

<Form
  name="basic5"
  initialValues={{ remember: true }}
  onFinish={onFinish}
  onFinishFailed={onFinishFailed}
  size="large"
  form={form}
  labelCol={{ style: { width: '100%', height: '30px' } }} //label样式
  labelAlign="left" //label样式
>
  <Form.Item
    name="username"
    validateFirst
    label="新手机号"
    rules={[
      { required: true, message: '请输入手机号' },
      {
        validator: (_, value) => {
          return validate.phone(value) ? Promise.resolve() : Promise.reject('手机号格式错误');
        }
      }
    ]}
  >
    <Input
      maxLength={11}
      placeholder="请输入手机号"
      allowClear
      style={{ borderTop: 'none', borderLeft: 'none', borderRight: 'none' }}
    />
  </Form.Item>
  <Form.Item
    name="code"
    validateFirst
    rules={[
      { required: true, message: '请输入验证码' },
      {
        required: true,
        validator: (_, value) => {
          return validate.onlyNum(value)
            ? Promise.resolve()
            : Promise.reject('请输入4位纯数字验证码');
        }
      }
    ]}
    label="验证码"
  >
    <Input
      className="captcha-input"
      placeholder="请输入验证码"
      style={{ borderTop: 'none', borderLeft: 'none', borderRight: 'none' }}
      suffix={
        <Button
          className="captcha"
          style={{ background: 'transparent', outline: 'none' }}
          disabled={disabled}
          onClick={getCodes}
        >
          获取验证码
        </Button>
      }
    />
  </Form.Item>
  />
</Form>;