Skip to main content

Сетки

  • Сетка внутри контейнера, относительно ширины которого рассчитываются размеры колонок.
  • Для строки - класс row, для столбца - класс col. 
  • По документации в строке может быть до 12 ячеек, но если их больше, и текст внутри короткий - визуально в строку помещается больше столбцов. 
  • Визуально внутри row может быть несколько строк при превышении 12. 
  • Одна строка всегда находится под другой.

Минимальный пример сетки:

<div class="container">
  <div class="row">
    <div class="col">
      Колонка
    </div>
    <div class="col">
      Колонка
    </div>
    <div class="col">
      Колонка
    </div>
  </div>
</div>
  • Модификаторы относительно размера окна, контрольные точки аналогичные контрольным точкам для сетки.
  • Для контрольной точки может быть дополнительный параметр - кол-во занимаемых ячеек. Например col-md-6.
  • Поведение: до размера окна, указанного в контрольной точке ширина 12, после - в соответствии с цифрой. Но за счет комбинации классов можно сделать, чтобы например на большом было 4 столбца один за одним, меньше - 2 и 2, еще меньше - 1,1,1,1 
<div class="row">
   <div class="col-md-6 col-xl-3">one</div>
   <div class="col-md-6 col-xl-3">two</div>
   <div class="col-md-6 col-xl-3">three</div>
   <div class="col-md-6 col-xl-3">four</div>
</div>
  • Вместо цифры может быть -auto в этом случае ширина зависит от контента
  • Может быть без контрольной точки
<div class="row">
    <div class="col-8">col-8</div>
    <div class="col-4">col-4</div>
</div>
  • Может быть без доп. параметра, но тогда должен быть предшествующий с полным набором параметров
<div class="container text-center">
  <div class="row">
    <div class="col-sm-8">col-sm-8</div>
    <div class="col-sm-4">col-sm-4</div>
  </div>
  <div class="row">
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
  </div>
</div>
  • В этом случае берется предыдущее распределение и применяется к неуказанному

За счет применения класса row-cols-* у div row фиксируется визуальное количество столбцов в одной строке (по-моему это повтор функционала). Хотя поведение данного класса несколько неясно: для такой настройки

<div class="row row-cols-4">
    <div class="col">Колонка</div>
    <div class="col">Колонка</div>
    <div class="col-6">Колонка</div>
    <div class="col">Колонка</div>
  </div>

последняя колонка будет визуально на следующей строке, что странно. Установленное количество строк фиксируется для всех размеров. Однако реальное назначение данного функционал несколько непонятно.

Строки могут быть вложенными.

Back to top