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>;