Этот компонент позволяет выравнивать и центрировать содержимое вашей страницы.
Как использовать компонент 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>