Водостічні жолоби
Жолоби — це відступи між вашими стовпцями, які використовуються для адаптивного простору та вирівнювання вмісту в системі сітки Bootstrap.
Як вони працюють
-
Жолоби — це проміжки між вмістом стовпця, створені горизонтальними
padding
. Ми встановлюємоpadding-right
іpadding-left
для кожного стовпця та використовуємо мінусmargin
, щоб компенсувати це на початку та в кінці кожного рядка, щоб вирівняти вміст. -
Жолоби починаються з
1.5rem
(24px
) ширини. Це дозволяє нам узгодити нашу сітку з масштабом відступів і прокладок полів . -
Водостічні жолоби можна адаптувати. Використовуйте специфічні для точки зупину класи жолобів, щоб змінити горизонтальні жолоби, вертикальні жолоби та всі жолоби.
Горизонтальні жолоби
.gx-*
класи можна використовувати для керування шириною горизонтальних жолобів. Батьківський елемент .container
або .container-fluid
може знадобитися відкоригувати, якщо також використовуються більші жолоби, щоб уникнути небажаного переповнення, використовуючи відповідну утиліту доповнення. Наприклад, у наступному прикладі ми збільшили відступ за допомогою .px-4
:
<div class="container px-4">
<div class="row gx-5">
<div class="col">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
</div>
</div>
Альтернативним рішенням є додавання обгортки навколо .row
класу .overflow-hidden
:
<div class="container overflow-hidden">
<div class="row gx-5">
<div class="col">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
</div>
</div>
Вертикальні жолоби
.gy-*
класи можна використовувати для керування шириною вертикальних жолобів. Як і горизонтальні жолоби, вертикальні жолоби можуть призвести до переповнення .row
в кінці сторінки. Якщо це станеться, ви додаєте оболонку .row
разом із .overflow-hidden
класом:
<div class="container overflow-hidden">
<div class="row gy-5">
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
</div>
</div>
Горизонтальні та вертикальні водостоки
.g-*
класи можна використовувати для керування горизонтальною шириною жолоба, у наступному прикладі ми використовуємо меншу ширину жолоба, тому не буде потреби додавати .overflow-hidden
клас-огортку.
<div class="container">
<div class="row g-2">
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
</div>
</div>
Ряди колон ринви
Класи ринв також можна додати до стовпців рядків . У наступному прикладі ми використовуємо адаптивні стовпці рядків і адаптивні класи gutter.
<div class="container">
<div class="row row-cols-2 row-cols-lg-5 g-2 g-lg-3">
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
</div>
</div>
Жолобів немає
Жолоби між колонками в наших попередньо визначених класах сітки можна видалити за допомогою .g-0
. Це видаляє мінус margin
s .row
і горизонталь padding
з усіх безпосередніх дочірніх стовпців.
Потрібен дизайн від краю до краю? Відкинути батьківський .container
або .container-fluid
.
На практиці це виглядає ось як. Зауважте, що ви можете продовжувати використовувати це з усіма іншими попередньо визначеними класами сітки (включаючи ширину стовпців, адаптивні рівні, зміни порядку тощо).
<div class="row g-0">
<div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
Поміняти водостоки
Класи побудовані з $gutters
карти Sass, яка успадкована від $spacers
карти Sass.
$grid-gutter-width: 1.5rem;
$gutters: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
);