该组件使您可以对齐和居中页面内容。
将.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>