Layout

基础表单布局

基于 Bootstrap 5 的表单布局组件，提供 Row 网格行、Col 网格列与 FormLabel 表单标签，支持多列表单网格、水平表单、列宽与自动宽度、行内表单及间距与对齐控制，用于从行内到水平到自定义网格的表单布局实现

Component Demo

Basic usage and examples of the Layout component

表单网格

使用 Row / Col 组件构建多列表单网格，各列自动均分可用宽度

间距

通过 className 传入 `g-3` 等间距修饰类，可同时控制水平与垂直方向的列间距

网格表单

结合不同断点的列宽与 FormLabel、FormControl、FormSelect 等表单组件，构建完整的网格表单

水平表单

为 FormLabel 设置 column 属性可应用 `col-form-label`，使标签与其关联控件垂直居中对齐

水平表单标签尺寸

邮箱

column 传入 `sm` 或 `lg` 时追加 `col-form-label-sm` / `col-form-label-lg`，与对应尺寸的控件保持一致

列宽

指定部分列的宽度（如 sm=7），其余列自动均分剩余空间

自动宽度

设置 xs="auto" 使列宽随内容收缩，配合 `align-items-center` 将各控件垂直居中

自动宽度与固定列宽混合

行内表单

lg="auto" 生成 `row-cols-lg-auto`，在 lg 断点以上横向排列，窄屏下各控件以 xs=12 纵向堆叠

交互演示

垂直居中（align-items-center）

记住我

API Documentation

Complete API reference for the Layout component

Props

Row

属性名	类型	默认值	描述
`as`	`ElementType`	`'div'`	渲染的根元素类型，默认渲染 `div`，可传入 `form`、`fieldset` 等元素或自定义组件
`className`	`string`	-	自定义类名，可通过 `g-`、`gx-`、`gy-` 等间距工具类以及 `align-items-` 对齐工具类组合布局
`lg`	`RowCols`	-	`lg` 及以上断点的每行最大列数，对应 `row-cols-lg-*`
`md`	`RowCols`	-	`md` 及以上断点的每行最大列数，对应 `row-cols-md-*`
`sm`	`RowCols`	-	`sm` 及以上断点的每行最大列数，对应 `row-cols-sm-*`
`xl`	`RowCols`	-	`xl` 及以上断点的每行最大列数，对应 `row-cols-xl-*`
`xs`	`RowCols`	-	默认断点的每行最大列数，对应 `row-cols-*`，如 2 或 `auto`
`xxl`	`RowCols`	-	`xxl` 及以上断点的每行最大列数，对应 `row-cols-xxl-*`
`...rest`	`HTMLAttributes<HTMLElement>`	-	根元素的所有原生属性（如 `id`、`style` 等）

Col

属性名	类型	默认值	描述
`as`	`ElementType`	`'div'`	渲染的根元素类型，默认渲染 `div`，可传入其他元素或自定义组件
`className`	`string`	-	自定义类名
`lg`	`ColSize`	-	`lg` 及以上断点的列宽，对应 `col-lg-`、`offset-lg-`、`order-lg-*`
`md`	`ColSize`	-	`md` 及以上断点的列宽，对应 `col-md-`、`offset-md-`、`order-md-*`
`sm`	`ColSize`	-	`sm` 及以上断点的列宽，对应 `col-sm-`、`offset-sm-`、`order-sm-*`
`xl`	`ColSize`	-	`xl` 及以上断点的列宽，对应 `col-xl-`、`offset-xl-`、`order-xl-*`
`xs`	`ColSize`	-	默认断点的列宽，对应 `col-`、`offset-`、`order-*`，如 7、`auto`、true 或 `{ span, offset, order }`
`xxl`	`ColSize`	-	`xxl` 及以上断点的列宽，对应 `col-xxl-`、`offset-xxl-`、`order-xxl-*`
`...rest`	`HTMLAttributes<HTMLElement>`	-	根元素的所有原生属性（如 `id`、`style` 等）

FormLabel

属性名	类型	默认值	描述
`as`	`ElementType`	`'label'`	渲染的根元素类型，默认渲染 `label`，可传入 `legend` 等元素或自定义组件
`children`	`ReactNode`	-	标签文本内容
`className`	`string`	-	自定义类名
`column`	`FormLabelColumn`	`false`	是否为水平表单的列标签（`col-form-label`），传入 `sm` 或 `lg` 时追加 `col-form-label-sm` / `col-form-label-lg` 尺寸类
`htmlFor`	`string`	-	原生 `for` 属性，关联表单控件的 `id`
`lg`	`ColSize`	-	`column` 为真时标签的 `lg` 及以上断点列宽，对应 `col-lg-*`
`md`	`ColSize`	-	`column` 为真时标签的 `md` 及以上断点列宽，对应 `col-md-*`
`sm`	`ColSize`	-	`column` 为真时标签的 `sm` 及以上断点列宽，对应 `col-sm-*`
`visuallyHidden`	`boolean`	`false`	是否应用视觉隐藏样式（`visually-hidden`），为屏幕阅读器保留可访问的标签
`xl`	`ColSize`	-	`column` 为真时标签的 `xl` 及以上断点列宽，对应 `col-xl-*`
`xs`	`ColSize`	-	`column` 为真时标签的默认断点列宽，对应 `col-*`
`xxl`	`ColSize`	-	`column` 为真时标签的 `xxl` 及以上断点列宽，对应 `col-xxl-*`
`...rest`	`LabelHTMLAttributes<HTMLLabelElement>`	-	根元素的所有原生属性（如 `onClick`、`aria-*` 等）

Type Definitions

ColOrder

网格列排序类型

export type ColOrder = 'first' | 'last' | number;

ColProps

网格列组件属性接口

export interface ColProps extends HTMLAttributes<HTMLElement> {
  as?: ElementType;
  className?: string;
  lg?: ColSize;
  md?: ColSize;
  sm?: ColSize;
  xl?: ColSize;
  xs?: ColSize;
  xxl?: ColSize;
}

ColSize

网格列宽类型

export type ColSize = boolean | ColSizeObject | ColSpan;

ColSizeObject

网格列宽对象类型

export interface ColSizeObject {
  offset?: number;
  order?: ColOrder;
  span?: ColSpan;
}

ColSpan

网格列跨度类型

export type ColSpan = 'auto' | number;

FormLabelColumn

表单标签列类型

export type FormLabelColumn = 'lg' | 'sm' | boolean;

FormLabelProps

表单标签组件属性接口

export interface FormLabelProps
  extends
    LabelHTMLAttributes<HTMLLabelElement>,
    Pick<ColProps, 'lg' | 'md' | 'sm' | 'xl' | 'xs' | 'xxl'> {
  as?: ElementType;
  className?: string;
  column?: FormLabelColumn;
  htmlFor?: string;
  visuallyHidden?: boolean;
}

RowCols

每行列数类型

export type RowCols = 'auto' | number;

RowProps

网格行组件属性接口

export interface RowProps extends HTMLAttributes<HTMLElement> {
  as?: ElementType;
  className?: string;
  lg?: RowCols;
  md?: RowCols;
  sm?: RowCols;
  xl?: RowCols;
  xs?: RowCols;
  xxl?: RowCols;
}