BootStarp 5 Система сетки Auto-layout столбцов

Система сетки Bootstrap отзывчива. он поставляется с flexbox и позволяет размещать до 12 столбцов на странице. вы также можете сгруппировать столбцы вместе.

Столбцы с автоматическим макетом: чтобы создать простые размеры столбцов без явного нумерованного класса, такого как .col-sm-6, используйте классы столбцов, зависящие от точки останова.

• Равная ширина: система сетки одинаковой ширины в основном используется для создания сетки одинакового размера. С помощью классов мы будем управлять шириной сетки.
• Установка ширины одного столбца: в этой функции Bootstrap5 вы можете установить ширину одного столбца и автоматически изменить размер родственных столбцов вокруг него.
• Содержимое переменной ширины: в этой функции Bootstrap5 вы можете установить размер столбцов на основе естественной ширины их содержимого, чтобы использовать классы col-{breakpoint}-auto.

Синтаксис:

  <div class="row">
    <div class="col">
     ...
    </div>
    <div class="col">
     ...
    </div>
  </div>

Пример 1: Давайте посмотрим на пример, когда ширина каждого столбца одинакова для каждой строки.

Выход:

Пример 2: Давайте посмотрим пример установки ширины одного столбца.

Выход:

Ссылка: https://getbootstrap.com/docs/5.0/layout/grid/#auto-layout-columns