Водостічні жолоби

Жолоби — це відступи між вашими стовпцями, які використовуються для адаптивного простору та вирівнювання вмісту в системі сітки 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. Це видаляє мінус margins .rowі горизонталь paddingз усіх безпосередніх дочірніх стовпців.

Потрібен дизайн від краю до краю? Відкинути батьківський .containerабо .container-fluid.

На практиці це виглядає ось як. Зауважте, що ви можете продовжувати використовувати це з усіма іншими попередньо визначеними класами сітки (включаючи ширину стовпців, адаптивні рівні, зміни порядку тощо).

.col-sm-6 .col-md-8

.col-6 .col-md-4

<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,
);