Odkvapy

Odkvapy sú vypchávky medzi stĺpcami, ktoré sa používajú na reagujúcu medzeru a zarovnanie obsahu v systéme mriežky Bootstrap.

Na tejto stránke

Ako fungujú

Odkvapy sú medzery medzi obsahom stĺpcov, vytvorené horizontálnym padding. Nastavíme padding-righta padding-leftna každý stĺpec a použijeme zápor marginna vyrovnanie na začiatku a na konci každého riadku, aby sme zarovnali obsah.
Odkvapy začínajú na šírku 1.5rem( ). 24pxTo nám umožňuje zosúladiť našu mriežku s mierkou vypchávky a rozperných vložiek.
Odkvapy je možné responzívne nastaviť. Na úpravu horizontálnych odkvapov, zvislých odkvapov a všetkých odkvapov použite triedy odkvapov špecifické pre bod zlomu.

Horizontálne odkvapy

.gx-*triedy možno použiť na ovládanie šírky vodorovných odkvapov. Ak sa používajú aj väčšie žľaby, môže byť potrebné upraviť .containeralebo rodič, aby sa predišlo nežiaducemu pretečeniu, pomocou vhodného nástroja na vypchávanie. .container-fluidNapríklad v nasledujúcom príklade sme zvýšili výplň pomocou .px-4:

Vlastné odsadenie stĺpcov

html

<div class="container px-4 text-center">
  <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>

Alternatívnym riešením je pridať obal okolo triedy .rows .overflow-hiddentriedou:

Vlastné odsadenie stĺpcov

html

<div class="container overflow-hidden text-center">
  <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>

Zvislé odkvapy

.gy-*triedy možno použiť na ovládanie šírky vertikálnych odkvapov v rámci riadku, keď sa stĺpce zalomia do nových riadkov. Podobne ako vodorovné odkvapy, aj zvislé odkvapy môžu spôsobiť pretečenie pod .rowna konci stránky. Ak k tomu dôjde, pridáte obal okolo .rowtriedy .overflow-hidden:

Vlastné odsadenie stĺpcov

html

<div class="container overflow-hidden text-center">
  <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álne a vertikálne odkvapy

.g-*triedy možno použiť na ovládanie šírky horizontálneho odkvapu, v nasledujúcom príklade použijeme menšiu šírku odkvapu, takže nebude potrebné pridávať .overflow-hiddentriedu wrapper.

Vlastné odsadenie stĺpcov

html

<div class="container text-center">
  <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>

Rad stĺpov odkvapy

Do stĺpcov riadkov je možné pridať aj triedy medzikružia . V nasledujúcom príklade používame responzívne riadkové stĺpce a responzívne triedy odkvapov.

Riadok stĺpec

html

<div class="container text-center">
  <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>

Žiadne odkvapy

Odkvapy medzi stĺpmi v našich preddefinovaných triedach mriežky je možné odstrániť pomocou .g-0. Toto odstráni záporné margins .rowa horizontálne paddingzo všetkých bezprostredných podradených stĺpcov.

Potrebujete dizajn od okraja po okraj? Ak chcete zabrániť pretečeniu, upustite nadradenú položku .containeralebo .container-fluida pridajte .mx-0k nej ..row

V praxi to vyzerá takto. Všimnite si, že to môžete naďalej používať so všetkými ostatnými preddefinovanými triedami mriežky (vrátane šírok stĺpcov, responzívnych vrstiev, zmien poradia a ďalších).

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

.col-6 .col-md-4

html

<div class="row g-0 text-center">
  <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>

Vymeňte odkvapy

Triedy sú postavené z $guttersmapy Sass, ktorá je zdedená 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,
);