Skip to content

col 布局规则

TIP

所有组件均支持布局配置规则,详细说明可参考

vant 栅格布局 Col props

自定义表单的布局

配置方式

在 FormCreate 中,可以通过 rule.col 配置项来设置组件的布局规则。Vant 使用 24 栅格系统,默认占满整行。

配置参数

参数说明类型默认值
span列元素宽度number | string-
offset列元素偏移距离number | string-
tag自定义元素标签stringdiv

布局示例

基础布局

单列布局(默认)

两列布局

三列布局

偏移布局

使用 offset 设置左侧偏移

使用 Row 和 Col 组件配合布局

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

基础用法

多行布局

提示

  • 使用 rowcol 组件时,需要设置 native: true 来原样生成组件
  • Vant 使用 24 栅格系统,适合移动端布局
  • 移动端建议使用单列或两列布局,以获得更好的用户体验

FormCreate 是一个开源项目,基于 MIT 许可证发布,欢迎个人和企业用户免费使用