Компонент Колонка
Контент в нескольких текстовых колонках. Универсальный вариант для отображения контента в нескольких текстовых колонках. Многоколоночный текст. Адаптивное поведение.
Универсальный вариант для отображения вашего контента в нескольких текстовых колонках, не разбивая его на несколько контейнеров.
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>
Адаптивное поведение
Текст в несколько колонок с адаптивным поведением
UIkit предоставляет ряд адаптивных классов для колонок компонента 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>