Примеры сетки Bootstrap 5
- Предыдущая страница Сетка BS5 XXL
- Следующая страница Основные шаблоны BS5
Ниже мы собрали несколько примеров сеткиBootstrap 5.
Три равных столбца
Используйте на указанном количестве элементов .col Класс, Bootstrap определяет количество элементов (и создает столбцы одинаковой ширины). В следующем примере мы используем три col элемента, каждый из которых имеет ширину 33.33%.
Пример
<div class="row"> <div class="col">col</div> <div class="col">col</div> <div class="col">col</div> </div>
Три равных столбца с использованием чисел
Вы также можете использовать числа для управления шириной столбцов. Убедитесь только, что сумма равна или меньше 12 (необходимо использовать все 12 доступных столбцов):
Пример
<div class="row"> <div class="col-4">col-4</div> <div class="col-4">col-4</div> <div class="col-4">col-4</div> </div>
Три не равных столбца
Чтобы создать не равные столбцы, вам необходимо использовать числа. В следующем примере будет создано разделение 25%/50%/25%:
Пример
<div class="row"> <div class="col-3">col-3</div> <div class="col-6">col-6</div> <div class="col-3">col-3</div> </div>
Установка ширины одного столбца
Однако, достаточно установить ширину одного столбца, и близлежащие столбцы автоматически будут корректироваться. В следующем примере будет создано разделение 25%/50%/25%:
Пример
<div class="row"> <div class="col">col</div> <div class="col-6">col-6</div> <div class="col">col</div> </div>
Более равных столбцов
Пример
<!-- Два равных столбца --> <div class="row"> <div class="col">1 из 2</div> <div class="col">2 из 2</div> </div> <!-- Четыре равных столбца --> <div class="row"> <div class="col">1 из 4</div> <div class="col">2 из 4</div> <div class="col">3 из 4</div> <div class="col">4 из 4</div> </div> <!-- Шесть равных столбцов --> <div class="row"> <div class="col">1 из 6</div> <div class="col">2 из 6</div> <div class="col">3 из 6</div> <div class="col">4 из 6</div> <div class="col">5 из 6</div> <div class="col">6 из 6</div> </div>
Row Cols
Вы также можете использовать .row-cols-* Контроль классов должен出现在旁边的列数（независимо от количества столбцов）:
Пример
<div class="row row-cols-1"> <div class="col">1 из 2</div> <div class="col">2 из 2</div> </div> <div class="row row-cols-2"> <div class="col">1 из 4</div> <div class="col">2 из 4</div> <div class="col">3 из 4</div> <div class="col">4 из 4</div> </div> <div class="row row-cols-3"> <div class="col">1 из 6</div> <div class="col">2 из 6</div> <div class="col">3 из 6</div> <div class="col">4 из 6</div> <div class="col">5 из 6</div> <div class="col">6 из 6</div> </div>
Более не равных столбцов
Пример
<!-- Два не равных столбца --> <div class="row"> <div class="col-8">1 из 2</div> <div class="col-4">2 из 2</div> </div> <!-- Четыре не равных столбца --> <div class="row"> <div class="col-2">1 из 4</div> <div class="col-2">2 из 4</div> <div class="col-2">3 из 4</div> <div class="col-6">4 из 4</div> </div> <!-- Установка ширины двух столбцов --> <div class="row"> <div class="col-4">1 из 4</div> <div class="col-6">2 из 4</div> <div class="col">3 из 4</div> <div class="col">4 из 4</div> </div>
одинаково высокие
Если один столбец выше другого (из-за текста или высоты CSS),其余 будут следовать:
Пример
<div class="row"> <div class="col">Lorem ipsum...</div> <div class="col">col</div> <div class="col">col</div> </div>
Вложенные столбцы
Пример показывает, как создать макет двух столбцов, в котором один столбец содержит два других столбца:
Пример
<div class="row">
<div class="col-8">
.col-8
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>
<div class="col-4">.col-4</div>
</div>
классы реакции
Система сетки Bootstrap 5 имеет пять классов:
.col-(устройства extra small - ширина экрана меньше 576px).col-sm-(устройства small - ширина экрана равна или больше 576px).col-md-(устройства medium - ширина экрана равна или больше 768 пикселей).col-lg-(устройства large - ширина экрана равна или больше 992 пикселей).col-xl-(устройства xlarge - ширина экрана равна или больше 1200px).col-xxl-(устройства xxlarge - ширина экрана равна или больше 1400px)
можно комбинировать перечисленные классы для создания более динамичного и гибкого макета.
Совет:каждый класс увеличивается пропорционально, поэтому если вы хотите для sm и md Чтобы установить одинаковую ширину, достаточно указать sm.
Переплетение в горизонтальное
Пример показывает, как создать макет столбцов, который начинается с переплетения на的超小型 устройствах, а затем становится горизонтальным на больших устройствах (sm, md, lg и xl):
Пример
<div class="row"> <div class="col-sm-9">col-sm-9</div> <div class="col-sm-3">col-sm-3</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>
Смешивать и совмещать
Пример
<!-- На сверхмалых устройствах 50%/50% разделение, на больших устройствах 75%/25% разделение --> <div class="row"> <div class="col-6 col-sm-9">col-6 col-sm-9</div> <div class="col-6 col-sm-3">col-6 col-sm-3</div> </div> <!-- На сверхмалых, малых, средних устройствах 58%/42% разделение, на больших и超大ных устройствах 66.3%/33.3% разделение --> <div class="row"> <div class="col-7 col-lg-8">col-7 col-lg-8</div> <div class="col-5 col-lg-4">col-5 col-lg-4</div> </div> <!-- На малых устройствах 25%/75% разделение, на средних устройствах 50%/50% разделение, на больших и超大ных устройствах 33%/66% разделение. На сверхмалых устройствах, автоматически упорядочивается (100%). --> <div class="row"> <div class="col-sm-3 col-md-6 col-lg-4">col-sm-3 col-md-6 col-lg-4</div> <div class="col-sm-9 col-md-6 col-lg-8">col-sm-9 col-md-6 col-lg-8</div> </div>
Без gutter
Чтобы изменить расстояние между колонками (дополнительное пространство), пожалуйста, используйте любое .g-1|2|3|4|5 класс (.g-4 Это значение по умолчанию).
Чтобы полностью удалить обрезку (gutter), пожалуйста, используйте .g-0:
Пример
<div class="row g-0">
- Предыдущая страница Сетка BS5 XXL
- Следующая страница Основные шаблоны BS5
