Žlaby

Mezery jsou vycpávky mezi sloupci, které se používají k citlivému prostoru a zarovnání obsahu v systému mřížky Bootstrap.

Na této straně

Jak fungují

Žlaby jsou mezery mezi obsahem sloupců, vytvořené horizontálním padding. Nastavíme padding-righta padding-leftna každý sloupec a použijeme zápor margink odsazení na začátku a konci každého řádku, abychom zarovnali obsah.
Žlaby začínají na šířce 1.5rem( ). 24pxTo nám umožňuje přizpůsobit naši mřížku měřítku vycpávek a okrajových distančních vložek .
Žlaby lze citlivě nastavit. K úpravě vodorovných okapů, svislých okapů a všech okapů použijte specifické třídy okapů.

Vodorovné žlaby

.gx-*třídy lze použít k ovládání vodorovných šířek okapů. Pokud jsou také použity větší okapy , může být nutné upravit .containernebo .container-fluidrodič, aby se zabránilo nechtěnému přetečení, pomocí vhodného nástroje pro výplň. Například v následujícím příkladu jsme zvýšili výplň pomocí .px-4:

Vlastní výplň sloupců

<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>

Alternativním řešením je přidat obal kolem třídy .rows .overflow-hiddentřídou:

Vlastní výplň sloupců

<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>

Svislé žlaby

.gy-*třídy lze použít k ovládání svislých šířek okapů. Stejně jako horizontální mezery mohou i vertikální mezery způsobit přetečení pod .rowna konci stránky. Pokud k tomu dojde, přidáte obal kolem .rowtřídy .overflow-hidden:

Vlastní výplň sloupců

<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>

Horizontální a vertikální žlaby

.g-*třídy lze použít k ovládání šířky horizontálního okapu, pro následující příklad použijeme menší šířku okapu, takže nebude potřeba přidávat .overflow-hiddentřídu wrapper.

Vlastní výplň sloupců

<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>

Řadové sloupy žlaby

Do řádkových sloupců lze také přidat třídy okapů . V následujícím příkladu používáme responzivní řádkové sloupce a responzivní třídy mezery.

Řádek sloupec

<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>

Žádné okapy

Žlaby mezi sloupy v našich předdefinovaných třídách mřížky lze odstranit pomocí .g-0. Tím se odstraní záporné margins .rowa vodorovné paddingze všech přímých podřízených sloupců.

Potřebujete design od okraje k okraji? Pusťte rodič .containernebo .container-fluid.

V praxi to vypadá takto. Všimněte si, že to můžete i nadále používat se všemi ostatními předdefinovanými třídami mřížky (včetně šířek sloupců, responzivních vrstev, změn pořadí a dalších).

.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>

Vyměňte okapy

Třídy jsou sestaveny z $guttersmapy Sass, která je zděděna z $spacersmapy Sass.

$grid-gutter-width: 1.5rem;
$gutters: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
);