Компонент Колонка : Column

Универсальный вариант для отображения вашего контента в нескольких текстовых колонках, не разбивая его на несколько контейнеров.

Многоколоночный текст

Добавьте один из классов .uk-column-* к элементу, чтобы отобразить его встроенное содержимое в нескольких столбцах/колонках.

Класс Описание
.uk-column-1-2 Разделяет содержимое на два столбца.
.uk-column-1-3 Отобразит содержимое в трех столбцах.
.uk-column-1-4 Отобразит содержимое в четырех столбцах.
.uk-column-1-5 Отображение содержимого в пяти столбцах.
.uk-column-1-6 Отображение содержимого в шести столбцах.
<div class="uk-column-1-2"></div>
  • Если вы хотите, чтобы ваш друг в свой день рождения почувствовал себя снова в волшебном мире детских сказок – подарите ему рваный воздушный шарик и пустой горшочек от меда.

    Однажды Уинстон Черчилль собирался на радио для выступления перед народом. Заказал такси, уже перед зданием радио спрашивает у таксиста, может ли тот подождать его полчаса, чтобы ехать обратно. Таксист не узнав Черчилля говорит, что не может подождать, так как сегодня выступает Черчилль и он торопится домой, чтобы послушать его речь. Такое понравилось Черчиллю и он оплатил за проезд гораздо больше чем было договорено. Таксист посмотрел на эти большие деньги, а потом на самого Черчилля и говорит: - Да пошел он со своей речью, я лучше вас подожду.

  • <div class="uk-column-1-2">
        <p>Если вы хотите, чтобы ваш друг в свой день рождения почувствовал себя снова в волшебном мире детских сказок – подарите ему рваный воздушный шарик и пустой горшочек от меда.</p>
        <p>Однажды Уинстон Черчилль собирался на радио для выступления перед народом. Заказал такси, уже перед зданием радио спрашивает у таксиста, может ли тот подождать его полчаса, чтобы ехать обратно. Таксист не узнав Черчилля говорит, что не может подождать, так как сегодня выступает Черчилль и он торопится домой, чтобы послушать его речь. Такое понравилось Черчиллю и он оплатил за проезд гораздо больше чем было договорено. Таксист посмотрел на эти большие деньги, а потом на самого Черчилля и говорит: - Да пошел он со своей речью, я лучше вас подожду.</p>
    </div>

Адаптивное поведение : Текст в несколько колонок

UIkit 3 предоставляет ряд адаптивных классов для колонок компонента Column. В основном они работают так же, как обычные классы столбцов, за исключением того, что у них есть суффиксы, указывающие на точку останова, с которой они вступают в силу.

Класс Описание
.uk-column-1-2@s - .uk-column-1-6@s Влияет только на ширину устройства от 640px и выше.
.uk-column-1-2@m - .uk-column-1-6@m Влияет только на ширину устройства от 960px и выше.
.uk-column-1-2@l - .uk-column-1-6@l Влияет только на ширину устройства 1200px и выше.
.uk-column-1-2@xl - .uk-column-1-6@xl Влияет только на ширину девайса 1600px и выше.
<div class="uk-column-1-2@s uk-column-1-3@m uk-column-1-4@l"></div>
  • Молодой артист пришёл к известному критику и попросил написать рекомендательное письмо главному режиссёру театра. Тот сел и написал: "Рекомендую вам своего друга. Он многоталантлив: играет Ромео, Гамлета, Цезаря, в преферанс и на бильярде. Лучше всего - на бильярде".

    Мы с холодильником очень похожи: он белый, и я белый, в нем сердце и печень, и во мне сердце и печень, в нем колбаса и яйца, и во мне колбаса и яйца, в нем пиво и во мне пиво...

    Как убедить жену, что ты и вправду был на рыбалке, а удочку дома оставил не потому что у тебя есть другая женщина, а потому что у тебя есть другая удочка?

  • <div class="uk-column-1-2@s uk-column-1-3@m uk-column-1-4@l">
        <p>Молодой артист пришёл к известному критику и попросил написать рекомендательное письмо главному режиссёру театра. Тот сел и написал: "Рекомендую вам своего друга. Он многоталантлив: играет Ромео, Гамлета, Цезаря, в преферанс и на бильярде. Лучше всего - на бильярде".</p>
        <p>Мы с холодильником очень похожи: он белый, и я белый, в нем сердце и печень, и во мне сердце и печень, в нем колбаса и яйца, и во мне колбаса и яйца, в нем пиво и во мне пиво...</p>
        <p>Как убедить жену, что ты и вправду был на рыбалке, а удочку дома оставил не потому что у тебя есть другая женщина, а потому что у тебя есть другая удочка?</p>
    </div>

Модификатор «Divider»

Чтобы отобразить вертикальную линию между столбцами, добавьте класс .uk-column-divider.

<div class="uk-column-1-2 uk-column-divider"></div>
  • Помню как мне математичка говорила что у нас не всегда будет калькулятор под рукой.

    Купил мужик квартиру с технологией "Умный дом", привёл домой девушку, а утром на Ютубе обнаружил ролик, где он занимается с ней сексом, дом оказался не только умным, но и сука - весёлым

    Великий упрек был бы историку предлагаемых событий, если бы он упустил сказать, что удовольствие одолело гостя после таких слов, произнесенных Маниловым. Как он ни был степенен и рассудителен, но тут чуть не произвел.

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

  • <div class="uk-column-1-2 uk-column-divider">
        <p>Помню как мне математичка говорила что у нас не всегда будет калькулятор под рукой.</p>
        <p>Купил мужик квартиру с технологией "Умный дом", привёл домой девушку, а утром на Ютубе обнаружил ролик, где он занимается с ней сексом, дом оказался не только умным, но и сука - весёлым</p>
        <p>Великий упрек был бы историку предлагаемых событий, если бы он упустил сказать, что удовольствие одолело гостя после таких слов, произнесенных Маниловым. Как он ни был степенен и рассудителен, но тут чуть не произвел.</p>
        <p>Побужденный признательностию, он наговорил тут же столько благодарностей, что тот смешался, весь покраснел, производил головою отрицательный жест и наконец уже выразился, что это сущее ничего, что он, точно, хотел бы доказать чем-нибудь сердечное влечение, магнетизм души скачок по образцу.</p>
    </div>

Как охватить все колонки

Чтобы встроенный элемент охватывал всю ширину столбцов, добавьте во внутренний элемент класс .uk-column-span (элемент проходит через все колонки).

<div class="uk-column-1-2">
    ...
    <p class="uk-column-span"></p>
    ...
</div>
  • В ту же минуту он предлагал вам ехать куда угодно, хоть на край света, войти в какое хотите предприятие, менять все что ни есть на все, что хотите. Ружье, собака, лошадь — все было предметом мены.

    Если ему на ярмарке посчастливилось напасть на простака и обыграть его, он накупал кучу всего, но вовсе не с тем, чтобы выиграть: это происходило просто от какой-то неугомонной юркости и бойкости характера.

    Не всегда просит прощения тот, кто виноват. Просит прощения тот, кто дорожит отношениями.

    Ни на одном собрании, где он был, не обходилось без истории. Какая-нибудь история непременно происходила: или выведут его под руки из зала жандармы, или принуждены бывают вытолкать свои же приятели. Они называются разбитными малыми, слывут еще в детстве и в школе за хороших товарищей и при всем том бывают весьма больно поколачиваемы.

  • <div class="uk-column-1-2 uk-column-divider">
        <p>В ту же минуту он предлагал вам ехать куда угодно, хоть на край света, войти в какое хотите предприятие, менять все что ни есть на все, что хотите. Ружье, собака, лошадь — все было предметом мены.</p>
        <p>Если ему на ярмарке посчастливилось напасть на простака и обыграть его, он накупал кучу всего, но вовсе не с тем, чтобы выиграть: это происходило просто от какой-то неугомонной юркости и бойкости характера.</p>
        <blockquote cite="#" class="uk-column-span">
            <p>Не всегда просит прощения тот, кто виноват. Просит прощения тот, кто дорожит отношениями.</p>
            <footer>Эрих Мария Ремарк - <cite><a href="">немецкий писатель XX века</a></cite></footer>
        </blockquote>
        <p>Ни на одном собрании, где он был, не обходилось без истории. Какая-нибудь история непременно происходила: или выведут его под руки из зала жандармы, или принуждены бывают вытолкать свои же приятели. Они называются разбитными малыми, слывут еще в детстве и в школе за хороших товарищей и при всем том бывают весьма больно поколачиваемы.</p>
    </div>
Документация
Компоненты