antd form响应式布局的问题

Question

基于antd pro做的管理系统，布局使用了row/col以及form的layout
我想让下面几个textarea跟上面维修人的input左边以及维修结果的右边对齐，右边是对齐了，但是左边怎么对不齐。因为上边三个控件跟下面的各自占的比例不一样。
有没有什么办法让他们对齐呢，或者不用响应式的情况下如何让他们对齐

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

<Form
    {...this.formItemLayout}
    hideRequiredMark={true}
    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 }}
          showTime={{ format: "HH:mm:ss" }}
          placeholder="请选择维修时间"
        />
      )}
    </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>
</Row>
<Row className={styles.row}>
  <Col xl={24} lg={24} md={24} sm={24} xs={24}>
    <Form.Item label={"故障位置:"} {...itemLayout}>
      {getFieldDecorator("troubleLocation", {
        initialValue: ticketParams.troubleLocation,
        rules: [
          {
            required: true,
            message: "请输入故障位置"
          }
        ]
      })(
        <Textarea
          rows={4}
          maxLength={128}
          placeholder={"请输入故障位置，128个字以内"}
        />
      )}
    </Form.Item>
  </Col>
  <Col xl={24} lg={24} md={24} sm={24} xs={24}>
    <Form.Item label={"故障现象:"} {...itemLayout}>
      {getFieldDecorator("troubleCase", {
        initialValue: ticketParams.troubleCase,
        rules: [
          {
            required: true,
            message: "请输入故障现象"
          }
        ]
      })(
        <Textarea
          rows={4}
          maxLength={128}
          placeholder={"请输入故障现象，128个字以内"}
        />
      )}
    </Form.Item>
  </Col>
  <Col xl={24} lg={24} md={24} sm={24} xs={24}>
    <Form.Item label={"故障原因:"} {...itemLayout}>
      {getFieldDecorator("troubleReason", {
        initialValue: ticketParams.troubleReason,
        rules: [
          {
            required: true,
            message: "请输入故障原因"
          }
        ]
      })(
        <Textarea
          rows={4}
          maxLength={128}
          placeholder={"请输入故障原因，128个字以内"}
        />
      )}
    </Form.Item>
  </Col>
  <Col xl={24} lg={24} md={24} sm={24} xs={24}>
    <Form.Item label={"备注信息:"} {...itemLayout}>
      {getFieldDecorator("remark", {
        initialValue: ticketParams.remark,
        rules: [
          {
            required: false,
            message: "请输入备注"
          }
        ]
      })(
        <Textarea
          rows={4}
          maxLength={128}
          placeholder={"请输入备注信息，256个字以内"}
        />
      )}
    </Form.Item>
  </Col>
</Row>

Answer 1

可以直接不用流式布局，直接通过CSS控制宽度

Answer 2

比如你上边的3栏是等比3分的，那么里边的 label 也需要等比x3，就和下边的对齐了。
比如你下边的 label 是2，那么3栏里边的 label 就需要是6