Компонент Контейнер
Компонент «Контейнер» позволяет выравнивать и центрировать содержимое страницы. Обычно в контейнер обернут основной контент сайта.
Container: Применение
Основы. Использование
Добавьте класс .uk-container к элементу блока, чтобы придать ему максимальную ширину
(по умолчанию max-width: 1200px). Элемент будет отцентрирован и будет иметь боковые внутренние отступы,
которые автоматически адаптируются для больших экранов. Обычно в контейнер оборачивают основной контент сайта.
<div class="uk-container"></div>
Модификатор «Размер»
Добавьте один из следующих классов в контейнер, чтобы применить необходимую максимальную ширину.
| Класс | Описание |
|---|---|
.uk-container-xsmall |
Добавьте этот класс, если вы хотите установить малую ширину для контейнера. По умолчанию: max-width: 750px |
.uk-container-small |
Добавьте этот класс для небольшого размера контейнера. По умолчанию: max-width: 900px |
.uk-container-large |
Добавьте этот класс для широкого размера контейнера. По умолчанию: max-width: 1400px |
.uk-container-xlarge |
Добавьте этот класс для большого размера контейнера. По умолчанию: max-width: 1600px |
.uk-container-expand |
Добавьте этот класс, если вы не хотите ограничивать ширину контейнера, но хотите динамическое горизонтальное заполнение. |
<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-xlarge"></div>
<div class="uk-container uk-container-expand"></div>
Контейнер xsmall
<div class="uk-container uk-container-xsmall">
<div class="uk-background-muted uk-padding uk-panel uk-text-center">
<p class="uk-h4">Контейнер xsmall</p>
</div>
</div>Секция и контейнер
Горизонтальный раздел документа и контейнер
Вы можете использовать компонент Контейнер для изменения ширины содержимого внутри горизонтальных разделов компонента Раздел.
<div class="uk-section uk-section-primary">
<div class="uk-container uk-container-small">
...
</div>
</div>