Container 容器

用于承载页面内容的容器，支持多种尺寸和对齐方式。基于 BrConfigProvider 实现全局主题配置。

基础用法

最基础的用法，提供一个限制了最大宽度并默认居中的容器。

Basic Centered Container

Restricts maximum width and centers display by default

Example

最大宽度变体

支持多种最大宽度，通过 maxWidth 属性控制，适配不同的设计场景。

sm (max-w-screen-sm)

md (max-w-screen-md)

lg (max-w-screen-lg)

Example

流体布局

设置 fluid 属性为 true 可实现流体布局，容器宽度将占满可用空间（width: 100%），移除最大宽度限制。

Fluid Layout Container

Width 100%，No maximum width restriction

Example

自定义内边距

通过 padding 属性可以调整容器的水平内边距。默认情况下，内边距会随着屏幕断点自适应。你可以指定特定的尺寸 tokens 或设置为 none 移除内边距。

No padding (padding="none")

Medium padding (padding="md")

Extra large padding (padding="2xl")

Example

主题定制

全局定制 (BrConfigProvider)

通过 BrConfigProvider 的 sizing 属性可以覆盖默认的 CSS 变量，从而改变容器在特定断点下的默认宽度和内边距表现。此配置会响应式地应用到所有使用了相应变体的组件上。

Use MD Container for size variables

Current padding-x: 1rem
Overridden --br-px-md Variable

Use LG Container for size variables

Current padding-x: 2rem
Overridden --br-px-lg Variable

Local override style

Use TailwindCSS of !px-0 Force override padding

Example

局部定制 (TailwindCSS)

可以使用 TailwindCSS 类名直接覆盖组件样式，支持响应式前缀。

<template>
  <BrContainer class="!px-0 sm:!px-4 bg-primary/10">
    局部覆盖了内边距，并在 sm 断点下改变了内边距。
  </BrContainer>
</template>

API

Props

属性名	类型	默认值	说明
as	string	'div'	渲染的 HTML 标签或组件
fluid	boolean	false	是否为流体布局（无最大宽度限制，宽度 100%）
maxWidth	string	'default'	最大宽度变体，可选值：'sm', 'md', 'lg', 'xl', '2xl', 'default', 'none'
padding	string	'default'	预设内边距，可选值：'xs', 'sm', 'md', 'lg', 'xl', '2xl', 'default', 'none'
centered	boolean	true	是否水平居中对齐（添加 mx-auto）

Slots

插槽名	说明
default	容器内容