Сетка Bootstrap 5: от堆积а к горизонтали

Пример сетки: Размещение по горизонтали

Давайте создадим базовую систему сетки, которая вначале堆积уется на сверхмалых устройствах, а затем становится горизонтальной на больших устройствах.

Ниже приведен пример простого расположения по горизонтали двух колонок, что означает, что оно будет создавать 50%/50% разделение на всех экранах, кроме сверхмалых экранов, где оно автоматически будет堆积 (100%):

Пример: Размещение по горизонтали

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6 bg-primary">
      <p>Столбец 1 ...</p>
    </div>
    <div class="col-sm-6 bg-dark">
      <p>Столбец 2 ...</p>
    </div>
  </div>
</div>

Попробуйте сами

Совет:.col-sm-* числа в классе указывают, сколько столбцов div должен перекрывать (всего 12 столбцов). Поэтому,.col-sm-1 простираются на 1 столбец.col-sm-4 простираются на 4 столбца.col-sm-6 простираются на 6 столбцов, и т.д.

Внимание:Убедитесь, что сумма равна или меньше 12 (необходимо использовать не все 12 доступных столбцов):

Совет:путем .container-fluid класс на .containerВы можете изменить любую полная ширина раскладка преобразуется в фиксированная ширина реактивная раскладка:

Пример: Реактивный контейнер

<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <p>Столбец 1 ...</p>
    </div>
    <div class="col-sm-6">
      <p>Столбец 2 ...</p>
    </div>
  </div>
</div>

Попробуйте сами

автоматическая раскладка столбцов

В Bootstrap 5 есть простой способ создать одинаково широкие столбцы для всех устройств: просто удалите .col-size-* удалите цифры и используйте только на элементах col .col-size Класс. Bootstrap определяет, сколько столбцов, и каждый столбец получает одинаковую ширину. Классы размера (sm, md и т.д.) определяют, когда столбцы должны отвечать:

<!-- Два столбца: 50% ширины на всех экранах, кроме сверхмалых устройств (100% ширины) -->
<div class="row">
  <div class="col-sm">1 из 2</div>
  <div class="col-sm">2 из 2</div>
</div>
<!-- Четыре столбца: 25% ширины на всех экранах, кроме сверхмалых устройств (100% ширины) -->
<div class="row">
  <div class="col-sm">1 из 4</div>
  <div class="col-sm">2 из 4</div>
  <div class="col-sm">3 из 4</div>
  <div class="col-sm">4 из 4</div>
</div>

Попробуйте сами