Контейнер

Этот компонент позволяет выравнивать и центрировать содержимое вашей страницы.

Как использовать компонент Container в UIkit 3

Добавьте класс .uk-container блочному элементу. Это ограничит максиальную ширину контентной части до 1200px с полями 40px. Разместите в этом блоке содержимое вашей страницы. Элемент будет отцентрирован и будет иметь боковые отступы, которые автоматически адаптируются для больших экранов.

Внимание Паддинги вложенных контейнеров будет удалены, чтобы не дублировать код.

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

Модификаторы размера

Добавьте один из следующих классов в контейнер, чтобы применить другую максимальную ширину.

Класс Описание
.uk-container-xsmall Очень маленький контейнер. Значение max-width: 750px. Поля по умолчанию 40px.
.uk-container-small Маленький контейнер. Значение max-width: 900px. Поля по умолчанию 40px.
.uk-container-large Большой контейнер. Значение max-width: 1600px. Поля по умолчанию 40px.
.uk-container-expand Добавьте этот класс, если не хотите ограничивать максимальную ширину контейнера, но хотите динамическое горизонтальное заполнение. Ширина будет установлена на Auto, поля по умолчанию 40px.
<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>

Контейнер в разделах

Вы можете применить этот компонент, чтобы изменить ширину содержимого внутри раздела. Используйте для этого компонент Разделы.

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