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