col 布局规则
配置方式
在 FormCreate 中，可以通过 rule.col 配置项来设置组件的布局规则。TDesign 使用 12 栅格系统，默认 span: 12，即每个组件占一半宽度。
配置参数
Col Props
| 名称 | 类型 | 默认值 | 说明 | 必传 |
|---|---|---|---|---|
| flex | String / Number | - | flex 布局填充。CSS 属性 flex 值。示例：2 / 3 / '100px' / 'auto' / '1 1 200px' | N |
| lg | Number / Object | - | ≥1200px 响应式栅格，可为栅格数或一个包含其他属性的对象（小尺寸电脑）。TS 类型：number | BaseColProps | N |
| md | Number / Object | - | ≥992px 响应式栅格，可为栅格数或一个包含其他属性的对象（超小尺寸电脑）。TS 类型：number | BaseColProps | N |
| offset | Number | 0 | 栅格左侧的间隔格数，间隔内不可以有栅格 | N |
| order | Number | 0 | 栅格顺序，flex 布局模式下有效 | N |
| pull | Number | 0 | 栅格向左移动格数 | N |
| push | Number | 0 | 栅格向左移动格数 | N |
| sm | Number / Object | - | ≥768px 响应式栅格，可为栅格数或一个包含其他属性的对象（平板）。TS 类型：number | BaseColProps | N |
| span | Number | 12 | 栅格占位格数，为 0 时相当于 display: none | N |
| tag | String | div | 自定义元素标签 | N |
| xl | Number / Object | - | ≥1400px 响应式栅格，可为栅格数或一个包含其他属性的对象（中尺寸电脑）。TS 类型：number | BaseColProps | N |
| xs | Number / Object | - | <768px 响应式栅格，可为栅格数或一个包含其他属性的对象（手机）。TS 类型：number | BaseColProps。详细类型定义 | N |
| xxl | Number / Object | - | ≥1880px 响应式栅格，可为栅格数或一个包含其他属性的对象（大尺寸电脑）。TS 类型：number | BaseColProps | N |
布局示例
基础布局
单列布局（默认）
两列布局
三列布局
偏移布局
使用 offset 设置左侧偏移
响应式布局
基础响应式
Flex 布局
使用 flex 属性
使用 Row 和 Col 组件配合布局
除了使用 rule.col 配置项外，还可以使用 row 和 col 组件来手动控制布局。
Row Props
| 名称 | 类型 | 默认值 | 说明 | 必传 |
|---|---|---|---|---|
| align | String | top | 纵向对齐方式。可选项：top/middle/bottom | N |
| gutter | Number / Object / Array | 0 | 栅格间隔，示例：{ xs: 8, sm: 16, md: 24}。当数据类型为 Number 和 Object 时，用于指定横向间隔。当数据类型为数组时，第一个参数为横向间隔，第二个参数为纵向间隔， [水平间隔, 垂直间隔]。TS 类型：number | GutterObject | Array<GutterObject | number>。详细类型定义 | N |
| justify | String | start | flex 布局下的水平排列方式。可选项：start/end/center/space-around/space-between | N |
| tag | String | div | 自定义元素标签 | N |
基础用法
多行布局
提示
- 使用
row和col组件时，需要设置native: true来原样生成组件 - TDesign 使用 12 栅格系统（默认 span: 12）
- 支持
flex属性进行 Flex 布局 - 可以通过
row的props设置gutter、justify、align等属性