Skip to content

Container 容器

定宽居中容器:按 size 映射 --oas-container-* 宽度 token,margin-inline: auto 居中(逻辑属性,RTL 自动合规),max-width: min(100%, token) 保证窄屏不溢出。

基础用法

默认 lg 居中

max-width: 992px

尺寸

size 六档:xs(480)/ sm(576)/ md(768)/ lg(992)/ xl(1200)/ full(100%)。容器用 hover 底色标出实际宽度。

六档尺寸

xs · 480pxsm · 576pxmd · 768pxlg · 992pxxl · 1200pxfull · 100%

关闭居中

center="false" 时取消居中(margin-inline: 0),容器贴行首(LTR 为左侧)。

center=false

左对齐,不再居中

内边距

padding 接受任意 token/值,作用于 padding-inline(逻辑内边距)。

padding 内边距

内容两侧留有 16px 内边距

空容器

无子元素不报错、不占位。

空容器

API

属性

属性说明类型默认值
center是否居中(center="false" 关闭)stringtrue
padding内边距 token/值(作用于 padding-inline
size定宽档位,映射 --oas-container-* tokenstringlg

插槽

名称说明
默认