col 布局规则
配置方式
在 FormCreate 中，可以通过 rule.col 配置项来设置组件的布局规则。如果未设置 col，默认布局为 { span: 24 }，即每个组件占满整行。
配置参数
| 成员 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| offset | 栅格左侧的间隔格数，间隔内不可以有栅格 | number | 0 |
| order | 栅格顺序，flex 布局模式下有效 | number | 0 |
| pull | 栅格向左移动格数 | number | 0 |
| push | 栅格向右移动格数 | number | 0 |
| span | 栅格占位格数，为 0 时相当于 display: none | number | - |
| xs | <576px 响应式栅格，可为栅格数或一个包含其他属性的对象 | number|object | - |
| sm | ≥576px 响应式栅格，可为栅格数或一个包含其他属性的对象 | number|object | - |
| md | ≥768px 响应式栅格，可为栅格数或一个包含其他属性的对象 | number|object | - |
| lg | ≥992px 响应式栅格，可为栅格数或一个包含其他属性的对象 | number|object | - |
| xl | ≥1200px 响应式栅格，可为栅格数或一个包含其他属性的对象 | number|object | - |
| xxl | ≥1600px 响应式栅格，可为栅格数或一个包含其他属性的对象 | number|object | - |
布局示例
基础布局
单列布局（默认）
两列布局
三列布局
偏移布局
使用 offset 设置左侧偏移
响应式布局
基础响应式
使用 Row 和 Col 组件配合布局
除了使用 rule.col 配置项外，还可以使用 row 和 col 组件来手动控制布局。
基础用法
多行布局
提示
- 使用
row和col组件时，需要设置native: true来原样生成组件 - Ant Design Vue 使用 24 栅格系统
- 可以通过
row的props设置gutter等属性