Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.7k views
in Technique[技术] by (71.8m points)

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>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...