col 布局规则

TIP

所有组件均支持布局配置规则。表单级行容器对应 Row（如全局 option.row 或规则中的 type: 'row'），表单项栅格对应 Col（如规则中的 rule.col）。

自定义表单的布局

配置方式

在 FormCreate 中，可以通过 rule.col 配置项来设置组件的布局规则。如果未设置 col，默认布局为 { span: 24 }，即每个组件占满整行。

Row 组件 props

用于行容器（例如全局 option.row，或规则里 type: 'row' 且置于 Col 外侧时的行配置）。

属性	参数	说明	类型	默认值
align	垂直对齐方式	—	top | middle | bottom | stretch | { [key in 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl']: 'top' | 'middle' | 'bottom' | 'stretch' }	top
gutter	栅格间隔	可以写成字符串 CSS 单位或支持响应式的对象写法来设置水平间隔 { xs: 8, sm: 16, md: 24 }。或者使用数组形式同时设置 [水平间距, 垂直间距]	number | string | object | array	0
justify	水平排列方式	—	start | end | center | space-around | space-between | space-evenly | { [key in 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl']: 'start' | 'end' | 'center' | 'space-around' | 'space-between' | 'space-evenly' }	start
wrap	是否自动换行	—	boolean	true

Col 组件 props

对应规则里的 rule.col（以及手动布局里 type: 'col' 时的 props）。若未设置 col，FormCreate 会合并默认 { span: 24 }，即单列占满一行。

属性	参数	说明	类型	默认值	版本
flex	flex 布局属性	—	string | number	—	—
offset	栅格左侧的间隔格数	间隔内不可以有栅格	number	0	—
order	栅格顺序	—	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	—	—
xxxl	窗口宽度 ≥ 1920px 响应式栈格	可为栈格数或一个包含其他属性的对象	number | object	—	1.0.3

布局示例

基础布局

单列布局（默认）

两列布局

三列布局

偏移布局

使用 offset 设置左侧偏移

响应式布局

基础响应式

使用 Row 和 Col 组件配合布局

除了使用 rule.col 配置项外，还可以使用 row 和 col 组件来手动控制布局。

基础用法

多行布局

提示

• 使用 row 和 col 组件时，需要设置 native: true 来原样生成组件
• 栅格列数为 24；Col 组件默认 span 为 12，规则里未写 col 时 FormCreate 仍按 { span: 24 } 合并
• 可通过 row 的 props 设置上表中的 gutter、align、justify、wrap 等属性