Container

基础布局

基于 Bootstrap 5 的布局容器组件，提供 Container 容器，支持默认定宽、全宽流式与按断点响应的三种模式，可渲染为任意语义化元素，并与 Row / Col 网格组件组合构建页面布局骨架

Basic usage and examples of the Container component

默认容器

默认容器在每个响应式断点下使用不同的最大宽度，并自动水平居中

默认渲染 `container` 类，sm 以下占满全宽，之后随断点依次固定在 540px、720px、960px、1140px、1320px

流式容器在任意视口宽度下始终占满整个可用宽度

传入 fluid 渲染 `container-fluid`，宽度始终为 100%，不受断点限制

视口 < 576px 时占满全宽，≥576px 后定宽

视口 < 768px 时占满全宽，≥768px 后定宽

视口 < 992px 时占满全宽，≥992px 后定宽

视口 < 1200px 时占满全宽，≥1200px 后定宽

视口 < 1400px 时占满全宽，≥1400px 后定宽

传入断点（sm、md、lg、xl、xxl）渲染对应的 `container-*` 类，低于该断点时占满全宽，达到断点后恢复定宽

1 / 3

2 / 3

3 / 3

Container 通常包裹 Row 与 Col，构成完整的页面网格布局骨架

通过 as 渲染为语义化的 section 元素

通过 as 渲染为语义化的 main 元素

通过 as 传入语义化元素，在保留容器样式的同时提升页面可访问性

通过下拉框切换容器模式，观察宽度随视口与断点的变化

Complete API reference for the Container component

属性名	类型	默认值	描述
`as`	`ElementType`	`'div'`	渲染的根元素类型，默认渲染 `div`，可传入 `section`、`main` 等语义化元素或自定义组件
`className`	`string`	-	自定义类名，可组合 `p-`、`bg-` 等工具类调整内边距与背景
`fluid`	`ContainerFluid \| boolean`	`false`	容器模式：传入 true 渲染 `container-fluid`；传入断点（如 `md`）渲染 `container-md`，低于该断点时占满全宽、达到断点后定宽；省略或为 false 时渲染默认 `container`
`...rest`	`HTMLAttributes<HTMLElement>`	-	根元素的所有原生属性（如 `id`、`style` 等）

容器响应式断点类型

export type ContainerFluid = 'lg' | 'md' | 'sm' | 'xl' | 'xxl';

容器组件属性接口

export interface ContainerProps extends HTMLAttributes<HTMLElement> {
  as?: ElementType;
  className?: string;
  fluid?: ContainerFluid | boolean;
}