是否可以使antd FormItem灵活

Question

我使用FormItem作为应用 UI 表格过滤条件，并使用Row和Col来布局组件。 目前我面临一个问题，当用户缩放 window 时， FormItem无法自动调整屏幕大小。 所以我想让FormItem灵活，当用户缩放浏览器window时， FormItem可以自动重新排列为多行以自动适应屏幕变化。 这是我正在使用的当前代码：

renderSimpleForm() {
    const {
      form,
      dispatch,
      loading,
      activityM: { wordItems = [] },
      activityM,
    } = this.props;
    const { getFieldDecorator } = form;
    const {
      formValues: { goodWord },
    } = this.state;

    
    return (
      <Form onSubmit={this.handleSearch} layout="inline">
        <Row gutter={16} justify="start">
          <Col md={5} sm={24}>
            <FormItem label="create date：">
              {getFieldDecorator('activityCreateTime', {
              })(<RangePicker className={styles.rangepicker} format={dateFormat} />)}
            </FormItem>
          </Col>
          <Col md={5} sm={24}>
            <FormItem label="activity date：">
              {getFieldDecorator('activityTime', {
              })(<RangePicker className={styles.rangepicker} format={dateFormat} />)}
            </FormItem>
          </Col>
          <Col md={3} sm={24}>
            <FormItem label="activity status:">
              {getFieldDecorator('activityStatus', {
                initialValue: '',
              })(
                <Select placeholder="please choose" style={{ width: 85 }} onSelect={this.onChoseHouse}>
                  <Option value="">all</Option>
                  {getSelectOptionByArr(questionType)}
                </Select>
              )}
            </FormItem>
          </Col>
          <Col md={4} sm={24}>
            <FormItem label="user：">
              {getFieldDecorator('name', {
                initialValue: this.state.formValues.name,
                rules: [{ required: false }],
              })(<Input type="text" placeholder="creator" />)}
            </FormItem>
          </Col>
          <Col md={2} sm={20}>
            <Button type="primary" shape="round" htmlType="submit" className="fun-button">
             search
            </Button>
          </Col>
        </Row>
      </Form>
    );
  }

我应该怎么做才能使FormItem项目灵活？

Answer 1

我现在用不同的设备定义不同的大小，就像每个 col 一样：

          <Col xs={24} sm={12} md={12} lg={12} xl={8} xxl={5}>
            <FormItem label="create date：">
              {getFieldDecorator('activityCreateTime', {
              })(<RangePicker className={styles.rangepicker} format={dateFormat} />)}
            </FormItem>
          </Col>