UIkit3.x文档

容器(Container)

该组件使您可以对齐和居中页面内容。

用法

.uk-container class添加到块元素中,包裹网站的主体内容并赋予其最大宽度。该元素将居中显示,并自动根据屏幕尺寸在两侧添加padding。

Note 在容器组件内部再嵌套容器组件,被嵌套的容器会移除padding,因为通常情况下这显得很多余。

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

尺寸调整

为container组件添加下面的class可以应用不同的最大宽度。

Class Description
.uk-container-xsmall 超窄的容器。
.uk-container-small 窄的容器。
.uk-container-large 宽的容器。
.uk-container-xlarge 超宽的容器。
.uk-container-expand 宽度无限制的容器(容器两侧带有padding)
<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-expand"></div>

区块中的容器

可以使用Container组件来调整Section 组件中的内容部分的宽度。

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