responsive

src/routes/user/UserFilter.js

@@ -11,9 +11,6 @@ const { RangePicker } = DatePicker
 const ColProps = {
   xs: 24,
   sm: 12,
-  md: 8,
-  lg: 6,
-  xl: 48,
   style: {
     marginBottom: 16,
   },
@@ -84,10 +81,10 @@ const UserFilter = ({
 
   return (
     <Row gutter={24}>
-      <Col {...ColProps}>
+      <Col {...ColProps} xl={{ span: 4 }} md={{ span: 8 }}>
         {getFieldDecorator('name', { initialValue: name })(<Search placeholder="Search Name" size="large" onSearch={handleSubmit} />)}
       </Col>
-      <Col {...ColProps}>
+      <Col {...ColProps} xl={{ span: 4 }} md={{ span: 8 }}>
         {getFieldDecorator('address', { initialValue: address })(
           <Cascader
             size="large"
@@ -97,21 +94,21 @@ const UserFilter = ({
             onChange={handleChange.bind(null, 'address')}
           />)}
       </Col>
-      <Col {...ColProps}>
+      <Col {...ColProps} xl={{ span: 6 }} md={{ span: 8 }} sm={{ span: 12 }}>
         <FilterItem label="Createtime">
           {getFieldDecorator('createTime', { initialValue: initialCreateTime })(
             <RangePicker style={{ width: '100%' }} size="large" onChange={handleChange.bind(null, 'createTime')} />
           )}
         </FilterItem>
       </Col>
-      <Col {...TwoColProps}>
+      <Col {...TwoColProps} xl={{ span: 10 }} md={{ span: 24 }} sm={{ span: 24 }}>
         <div style={{ display: 'flex', justifyContent: 'space-between' }}>
           <div >
             <Button type="primary" size="large" className="margin-right" onClick={handleSubmit}>Search</Button>
-            <Button size="large" className="margin-right" onClick={handleReset}>Reset</Button>
+            <Button size="large" onClick={handleReset}>Reset</Button>
           </div>
           <div>
-            <Switch style={{ marginRight: 16 }} defaultChecked={isMotion} onChange={switchIsMotion} checkedChildren={'动画开'} unCheckedChildren={'动画关'} />
+            <Switch style={{ marginRight: 16 }} size="large" defaultChecked={isMotion} onChange={switchIsMotion} checkedChildren={'Motion'} unCheckedChildren={'Motion'} />
             <Button size="large" type="ghost" onClick={onAdd}>Create</Button>
           </div>
         </div>