使用antd中的Form和24 栅格系统进行排版实现响应式布局

import React, { Component } from 'react';
import { Table, Row, Col, Input, DatePicker, Button, Select, Form} from 'antd';

import { getFormatDate } from '../../utils/date';
import '../../styles/Common.css';
import './TradeCircle.css';

const { RangePicker } = DatePicker;
const FormItem = Form.Item;

class TradeCircleList extends Component {
    constructor(props) {
        super(props);
        this.state = {
    
        }
    }

    render() {
        const columns = [
            {
                title: '序号',
                dataIndex: 'num',
                render: (text, record, index) => <span>{(this.state.currentPageIndex - 1) * 20 + index + 1}</span>
            },{
                title: '姓名',
                dataIndex: 'userName',
                key: 'userName',
            },{
                title: '手机号码',
                dataIndex : 'telphone',
                key: 'telphone',
            },{
                title: '生意圈类型',
                dataIndex: 'type',
                key: 'type',
                render: text => {
                    switch (text) {
                        case 1:
                            return <span>图文</span>;
                        case 2:
                            return <span>视频</span>;
                        case 3:
                            return <span>供需</span>;
                        case 4:
                            return <span>引用</span>;
                        case 5:
                            return <span>想法</span>;
                        default:
                            return null;
                    }
                }
            },{
                title: '内容预览',
                dataIndex: 'content',
                key: 'content',
                render:(text) => {
                    return (
                        <span>
                            {text ? (text.length > 10 ? text.substr(0, 10) + "(.....)" : text) : ""}
                        </span>
                    )
                }
            },{
                title: '发布时间',
                dataIndex: 'createDate',
                key: 'createDate',
                render: CreateDate => (<span>{getFormatDate(CreateDate)}</span>)
            },{
                title: '审核人',
                dataIndex: 'reportUserName',
                key: 'reportUserName',
            },{
                title: '审核状态',
                dataIndex: 'status',
                key: 'status',
                render: text => {
                    switch (text) {
                        case -1:
                            return <span>未通过</span>;
                        case 0:
                            return <span>审核中</span>;
                        case 1:
                            return <span>已通过</span>
                        default:
                            return null;
                    }
                }
            },{
                title: '标签',
                dataIndex: 'tags',
                key: 'tags',
            },{
                title: '审核时间',
                dataIndex: 'updateDate',
                key: 'updateDate',
                render: UpdateDate => (<span>{getFormatDate(UpdateDate)}</span>)
            },{
                title: '备注',
                dataIndex: 'remark',
                key: 'remark',
                render:(text) => {
                    return (
                        <span>
                            {text ? (text.length > 10 ? text.substr(0 , 10) + "(....)": text) : ""}
                        </span>
                    )
                }
            },{
                title: '推荐情况',
                dataIndex: 'recommendation',
                key: 'recommendation',
                render: text => {
                    switch (text) {
                        case 1:
                            return <span>未推荐</span>;
                        case 2:
                            return <span>已推荐待推送</span>;
                        case 3:
                            return <span>已推送</span>;
                        default:
                            return null;
                    }
                }
            },{
                title: '操作',
                key: 'action',
                fixed: 'right',
                width: 110,
                render: (text, record) => (
                    <span>
                        <a href='javascript:;' onClick={() => this.showDetailsModal(record)}>详情</a>
                        {/* <Divider type='vertical'></Divider> */}
                        {record.status !== 1 ? <a href='javascript:;' onClick={() => this.showModal(record)} >审核</a> : null}
                    </span>
                )
            }];


            const { getFieldDecorator } = this.props.form;
        
            const formItemLayout = {
                labelCol: {
                    xs: { span: 24 },
                    sm: { span: 6 },
                },
                wrapperCol: {
                    xs: { span: 24 },
                    sm: { span: 16 },
                },
            };

        return (
            <div>
                <Form layout="horizontal">
                    <Row gutter={18}>
                        <Col xl={6} md={12} sm={24}>
                            <FormItem label="姓名" {...formItemLayout}   >
                                {getFieldDecorator('title', {
                                    // rules: [{ required: true, message: "请输入活动名" }],
                                })(<Input  placeholder="输入用户名" />)}
                            </FormItem>
                        </Col>
                        <Col xl={6} md={12} sm={24}>
                            <FormItem label="手机号码" {...formItemLayout}   >
                                {getFieldDecorator('title', {
                                    // rules: [{ required: true, message: "请输入活动名" }],
                                })(<Input placeholder="输入手机号码" />)}
                            </FormItem>
                        </Col>
                        <Col xl={6} md={12} sm={24}>
                            <FormItem label="类型" {...formItemLayout}>
                                {getFieldDecorator('type', {
                                    // rules: [{ required: true }],
                                    initialValue: "全部",
                                    //valuePropName: "checked"
                                })(
                                    <Select>
                                        <Select.Option value={0}>全部</Select.Option>
                                        <Select.Option value={1}>图文</Select.Option>
                                        <Select.Option value={2}>视频</Select.Option>
                                        <Select.Option value={3}>供需</Select.Option>
                                        <Select.Option value={4}>引用</Select.Option>
                                        <Select.Option value={5}>想法</Select.Option>
                                    </Select>
                                )}
                            </FormItem>
                        </Col>
                        <Col xl={6} md={12} sm={24}>
                            <FormItem label="发布时间"  {...formItemLayout}>
                                {getFieldDecorator('registrationRangepicker')(
                                    <RangePicker />
                                )}
                            </FormItem>
                        </Col>
                        <Col xl={6} md={12} sm={24}>
                            <FormItem label="审核人" {...formItemLayout}>
                                {getFieldDecorator('type', {
                                    // rules: [{ required: true }],
                                    initialValue: "全部",
                                    //valuePropName: "checked"
                                })(
                                    <Select>
                                        <Select.Option value={0}>全部</Select.Option>
                                        <Select.Option value={1}>ZD001</Select.Option>
                                        <Select.Option value={2}>ZD002</Select.Option>
                                        <Select.Option value={3}>ZD003</Select.Option>
                                    </Select>
                                )}
                            </FormItem>
                        </Col>
                        <Col xl={6} md={12} sm={24}>
                            <FormItem label="审核状态" {...formItemLayout}>
                                {getFieldDecorator('type', {
                                    // rules: [{ required: true }],
                                    initialValue: "全部",
                                    //valuePropName: "checked"
                                })(
                                    <Select>
                                        <Select.Option value={0}>全部</Select.Option>
                                        <Select.Option value={1}>待审核</Select.Option>
                                        <Select.Option value={2}>已审核</Select.Option>
                                        <Select.Option value={3}>已删除</Select.Option>
                                    </Select>
                                )}
                            </FormItem>
                        </Col>
                        <Col xl={6} md={12} sm={24}>
                            <FormItem label="推荐情况" {...formItemLayout}>
                                {getFieldDecorator('type', {
                                    // rules: [{ required: true }],
                                    initialValue: "全部",
                                    //valuePropName: "checked"
                                })(
                                    <Select>
                                        <Select.Option value={0}>全部</Select.Option>
                                        <Select.Option value={1}>未推荐</Select.Option>
                                        <Select.Option value={2}>已推荐待推送</Select.Option>
                                        <Select.Option value={3}>已推送</Select.Option>
                                    </Select>
                                )}
                            </FormItem>
                        </Col>
                        <Col xl={6} md={12} sm={24}>
                            <FormItem label="审核时间"  {...formItemLayout}>
                                {getFieldDecorator('registrationRangepicker')(
                                    <RangePicker />
                                )}
                            </FormItem>
                        </Col>
                        <Col xl={6} md={12} sm={24} style={{float: "right", marginBottom: 10}}>
                            <Button type="primary" icon="search" style={{ marginRight: 55 }}>搜索</Button>
                            <Button type="default" icon="redo">重置</Button>
                        </Col>
                    </Row>
                </Form>
                <Table
                    columns={columns}
                />
            </div> 
        );
    }
}

export default Form.create()(TradeCircleList);

效果图：