是否可以使antd具有灵活性？

Question

我使用FormItem作为应用UI表筛选条件，并使用Row和Col来布局组件。目前我面临的问题是，当用户缩放窗口时，FormItem无法自动适应屏幕的大小调整。因此，我想要使FormItem的灵活性，当用户缩放烤架窗口时，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>