Grid栅格布局

Row, Col 配置文档
https://3x.ant.design/components/grid-cn/#components-grid-demo-responsive-more

Row 基本用法

// 
<Row gutter={16}>
  <Col span={8}></Col>
  <Col span={16}></Col>
</Row>
//

响应式用法

Row, Col的响应式写法

const gutter = { xs: 8, md: 16, xxl: 24 };
const gutter [16, 16];
const gutter = 24;
const col = {
  xs: 12,
  md: 8,
  xxl: 6,
};
<Row gutter={gutter}>
  <Col {...col}></Col>
  <Col span={16}></Col>
</Row>

style自定义列宽

当 Row, Col需要自适应时，可以用 style来修改列宽

const itemLayout = { labelCol: { span: 6 }, wrapperCol: { span: 18 } };
const fileLayout = {
  labelCol: { span: 3, style: { width: '12.3%' } },
  wrapperCol: { span: 21, style: { width: '87.7%' } },
};
function App() {
  return (
    <Row gutter={16}>
      <Col span={8}>
        <Item label='名称'>
          {getFieldDecorator('name', {
            initialValue: value.name,
            rules: [{ required: true, message: '请输入名称' }],
          })(<Input allowClear placeholder='请输入名称' />)}
        </Item>
      </Col>
      <Col span={16}>
        <Form.Item label='描述' {...fileLayout}>
          {getFieldDecorator('desc', {
            initialValue: value.desc,
            rules: [{ required: true, message: '请输入描述' }],
          })(<Input allowClear placeholder='请输入描述' />)}
        </Form.Item>
      </Col>
    </Row>
  );
}

Row-Col浮动引起的错位

错位问题，大部分是表单验证错误时，布局被撑开，导致流式布局错位，引起的；
解决，Row 添加 type=’flex’

import { Row, Col } from 'antd';
<Row gutter={16} type="flex">
  <Col span={8}>
    <Form.Item label='名称'>
      {getFieldDecorator('name', {
        initialValue: '',
        rules: [{ required: true, message: '请输入名称' }],
      })(<Input placeholder='请输入名称' allowClear />)}
    </Form.Item>
  </Col>
  <Col span={8}>
    <Form.Item label='信息来源'>
      {getFieldDecorator('from', {
        initialValue: '',
        rules: [{ required: true, message: '请选择信息来源' }],
      })(
        <Select placeholder='请选择信息来源' />,
      )}
    </Form.Item>
  </Col>
</Row>

解决后的，表单展示