跳到主要内容

文档

Container

该组件用于对齐和居中页面内容。

用法

为块级元素添加 .uk-container 类,使其具有最大宽度,并用来包裹网站的主体内容。该元素会居中显示,两侧带有内边距,在较大屏幕上会自动适配。

注意 嵌套容器的内边距会被移除,以避免多余的间隔。

<div class="uk-container"></div>

尺寸修饰符

为容器添加以下任意一个类,即可应用不同的最大宽度。

类 描述
.uk-container-xsmall 添加该类以获得超小尺寸容器。
.uk-container-small 添加该类以获得小尺寸容器。
.uk-container-large 添加该类以获得大尺寸容器。
.uk-container-xlarge 添加该类以获得超大尺寸容器。
.uk-container-expand 如果你不想限制容器宽度,但仍希望保留动态的水平内边距,请添加该类。
<div class="uk-container uk-container-xsmall"></div>

<div class="uk-container uk-container-small"></div>

<div class="uk-container uk-container-large"></div>

<div class="uk-container uk-container-xlarge"></div>

<div class="uk-container uk-container-expand"></div>

区块中的容器

你可以使用该组件来调整来自 Section 组件 的区块内内容的宽度。

<div class="uk-section uk-section-primary">
    <div class="uk-container uk-container-small"></div>
</div>