Компонент Контейнер 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>

Container