Сетки

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

<div class="container">
  <div class="row">
    <div class="col">
      Колонка
    </div>
    <div class="col">
      Колонка
    </div>
    <div class="col">
      Колонка
    </div>
  </div>
</div>
<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>
<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>

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

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


Revision #6
Created 20 August 2024 14:33:50 by Admin
Updated 23 August 2024 15:41:50 by Admin