col 布局规则
配置方式
在 FormCreate 中，可以通过 rule.col 配置项来设置组件的布局规则。如果未设置 col，默认布局为 { span: 24 }，即每个组件占满整行。
配置参数
| 参数名 | 描述 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| span | 栅格占位格数 | number | 24 | |
| offset | 栅格左侧的间隔格数，间隔内不可以有栅格 | number | - | |
| order | 对元素进行排序 | number | - | |
| xs | < 576px 响应式栅格 | number | { [key: string]: any } | - | |
| sm | >= 576px 响应式栅格 | number | { [key: string]: any } | - | |
| md | >= 768px 响应式栅格 | number | { [key: string]: any } | - | |
| lg | >= 992px 响应式栅格 | number | { [key: string]: any } | - | |
| xl | >= 1200px 响应式栅格 | number | { [key: string]: any } | - | |
| xxl | >= 1600px 响应式栅格 | number | { [key: string]: any } | - | |
| flex | 设置 flex 布局属性 | number | string | 'initial' | 'auto' | 'none' | - | 2.10.0 |
布局示例
基础布局
单列布局（默认）
两列布局
三列布局
偏移布局
使用 offset 设置左侧偏移
响应式布局
基础响应式
Flex 布局
使用 flex 属性
使用 Row 和 Col 组件配合布局
除了使用 rule.col 配置项外，还可以使用 row 和 col 组件来手动控制布局。
基础用法
多行布局
提示
- 使用
row和col组件时，需要设置native: true来原样生成组件 - Arco Design 使用 24 栅格系统
- 支持
flex属性进行 Flex 布局 - 可以通过
row的props设置gutter等属性