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	容器内容