Колонки: основы

Колонки — главный способ разложить содержимое страницы по горизонтали: меню слева, текст справа, три карточки в ряд. В Bulma для этого нужны всего два класса: columns — ряд, column — колонка внутри него. Ряд построен на флексбоксе, и колонки по умолчанию делят его ширину поровну.

Ряд и колонки

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
 
<div class="columns">
  <div class="column has-background-primary-light">Закуски</div>
  <div class="column has-background-info-light">Паста</div>
  <div class="column has-background-warning-light">Десерты</div>
</div>

На широком экране три колонки стоят в ряд, каждая занимает треть. В узком превью они встанут друг под другом — почему, объяснено ниже. Классы has-background-*-light только подкрашивают колонки, чтобы были видны их границы. Добавьте четвёртую колонку — все станут по четверти, ничего пересчитывать не нужно.

Колонки на телефоне

Колонки Bulma включаются начиная с ширины 769 px — с планшета. На более узком экране они встают друг под другом, по одной в строку. Для меню ресторана это удобно: на телефоне блюда идут списком, а не сжимаются в узкие полоски.

Если ряд должен сохраняться и на телефоне — например, две маленькие кнопки или цена рядом с названием, — добавьте ряду модификатор is-mobile:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
 
<div class="columns is-mobile">
  <div class="column has-background-light">Тирамису</div>
  <div class="column has-background-light has-text-right">€7</div>
</div>

Название и цена остаются в одной строке при любой ширине окна — и в узком превью тоже. Поэтому в примерах курса, где важно показать именно ряд, у columns будет стоять is-mobile.

Колонки со своим содержимым

Внутри колонки может быть что угодно: текст, картинка, другой элемент Bulma. Колонка сама добавляет внутренние отступы, поэтому соседние блоки не слипаются:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
 
<div class="columns">
  <div class="column">
    <img src="/media/photo-400x250.jpg" alt="Зал ресторана">
  </div>
  <div class="column">
    <h2 class="title is-4">О нас</h2>
    <p>Trattoria Oliva открылась в 2012 году. Мы готовим пасту вручную каждое утро.</p>
  </div>
</div>

На широком экране слева фотография зала, справа заголовок и текст; в превью и на телефоне текст идёт под фото. Картинка не вылезает за колонку: Bulma задаёт изображениям max-width: 100%.

Как это устроено

Отрицательные отступы ряда компенсируют внутренние отступы крайних колонок, поэтому содержимое ровно совпадает с краями страницы.

Частая ошибка

Класть column прямо в контейнер или секцию, без обёртки columns. Тогда флексбокса нет, и колонки встанут друг под другом даже на широком экране. Колонка всегда лежит внутри ряда: columns, внутри него column, внутри — содержимое.