Estoy usando FormItem como la condición de filtro de la tabla de la interfaz de usuario de la aplicación y uso Row y Col para diseñar el componente. Actualmente me enfrento a un problema que cuando el usuario escala la ventana, FormItem no puede ajustar automáticamente el tamaño de la pantalla. Así que quiero hacer que FormItem flexible, cuando el usuario escale la ventana del navegador, FormItem podría reorganizarse automáticamente a varias líneas para adaptarse al cambio de pantalla automáticamente. Este es el código actual que estoy usando:

 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> ); }

¿Qué debo hacer para que los elementos de FormItem flexibles?