UIkit3.x文档

容器(Container)

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

用法

.uk-container 添加到block元素,使其具有最大宽度并将网站的主体内容包裹在内。该元素将居中显示,并且两侧会根据屏幕尺寸添加可以自动调整大小的 padding。

Note 在容器组件内部再嵌套容器组件会移除被嵌套容器的padding以避免产生不必要的间距。

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

尺寸调整

将下列类之一添加到容器将应用不同的最大宽度。

Class Description
.uk-container-xsmall 为超窄的容器添加这个class。
.uk-container-small 窄的容器添加这个class。
.uk-container-large 比较宽的容器。
.uk-container-expand 如果您不想限制容器的宽度,但又需要容器拥有可以自动调整大小的水平padding,请添加这个class。
<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>

区块中的容器

可以应用这个组件来调整Section 组件中各节内部内容的宽度。

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