antd form响应式布局的问题

Question

antd结合row,col布局有个小细节一直处理不好

代码是这样 的

this.formItemLayout = {
  labelCol: {
    xs: { span: 24 }, // * <576p
    sm: { span: 4 }, // * ≥576px
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 20 },
  }
};

`<Form {...this.formItemLayout} labelAlign='left' >

<Row gutter={24} className={styles.row}>
  <Col xl={8} lg={8} md={12} sm={12} xs={24}>
    <Form.Item label={"维修人:"}>
      {getFieldDecorator("maintainUser", {
        initialValue: ticketParams.maintainUser,
        rules: [
          {
            required: true,
            message: "请输入维修人"
          }
        ]
      })(<Input placeholder='请输入维修人' />)}
    </Form.Item>
  </Col>
  <Col xl={8} lg={8} md={12} sm={12} xs={24}>
    <Form.Item label={"维修时间:"}>
      {getFieldDecorator("maintainTime", {
        initialValue: ticketParams.maintainTime && moment(ticketParams.maintainTime, 'YYYY-MM-DD hh:mm:ss'),
        rules: [
          {
            required: true,
            message: "请选择维修时间"
          }
        ]
      })(<DatePicker style={{ minWidth: 200 }} placeholder="请选择维修时间" format={'YYYY-MM-DD hh:mm:ss'} />)}
    </Form.Item>
  </Col>
  <Col xl={8} lg={8} md={12} sm={12} xs={24}>
    <Form.Item label={"维修结果:"}>
      {getFieldDecorator("maintainResult", {
        initialValue: ticketParams.maintainResult,
        rules: [
          {
            required: true,
            message: "请输入维修结果"
          }
        ]
      })(<Input placeholder='请输入维修结果' />)}
    </Form.Item>
  </Col>
  <Col xl={24} lg={24} md={24} sm={24} xs={24}>
    <Form.Item label={"故障位置:"} >
      {getFieldDecorator("troubleLocation", {
        initialValue: ticketParams.troubleLocation,
        rules: [
          {
            required: true,
            message: "请输入故障位置"
          }
        ]
      })(
        <Textarea
          rows={4}
          placeholder={"请输入故障位置，128个字以内"}
        />
      )}
    </Form.Item>
  </Col>
  <Col xl={24} lg={24} md={24} sm={24} xs={24}>
    <Form.Item label={"故障现象:"} >
      {getFieldDecorator("troubleCase", {
        initialValue: ticketParams.troubleCase,
        rules: [
          {
            required: true,
            message: "请输入故障现象"
          }
        ]
      })(
        <Textarea
          rows={4}
          placeholder={"请输入故障现象，128个字以内"}
        />
      )}
    </Form.Item>
  </Col>
  <Col xl={24} lg={24} md={24} sm={24} xs={24}>
    <Form.Item label={"故障原因:"} >
      {getFieldDecorator("troubleReason", {
        initialValue: ticketParams.troubleReason,
        rules: [
          {
            required: true,
            message: "请输入故障原因"
          }
        ]
      })(
        <Textarea
          rows={4}
          placeholder={"请输入故障原因，128个字以内"}
        />
      )}
    </Form.Item>
  </Col>
  <Col xl={24} lg={24} md={24} sm={24} xs={24}>
    <Form.Item label={"备注信息:"} >
      {getFieldDecorator("remark", {
        initialValue: ticketParams.remark,
        rules: [
          {
            required: false,
            message: "请输入备注"
          }
        ]
      })(
        <Textarea
          rows={4}
          placeholder={"请输入备注信息，256个字以内"}
        />
      )}
    </Form.Item>
  </Col>
</Row>
`</Form>`
这样离得很远对不齐，因为上面三个控件占一个row，每个控件占8份，下面4个textarea是每个直接占一行，然后我针对四个textarea的Form.item单独设置了labelCol和WraperCol

const labelCol = {
xs: { span: 24 },
sm: { span: 2 },
}
const wrapperCol = {
xs: { span: 24 },
sm: { span: 22 },
}

这样间距小了点 但是还是对不齐，有没有更好的办法做到响应式并且对齐呢

Answer 1

你这个涉及到计算

你第一排的4:20是在col的基础上 然而col只有8宽 占总宽(24)的1/3 所以实际宽度4/3:20/3
而你下面一排是4:20

4/3和4不相等 所以就对不齐

所以你需要调整合适的值来对齐左边