antd form响应式布局的问题

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

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>
阅读 157
评论
    2 个回答
    • 1
    • 新人请关照

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

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

        撰写回答

        登录后参与交流、获取后续更新提醒