是否有可能使 antd FormItem 灵活

Question

我正在使用FormItem作为应用UItable过滤条件，并使用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 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>

是否有可能使 antd FormItem 灵活

is it possible to make the antd FormItem flexiable

javascript

reactjs

antd