Žlebovi

Žlebovi so oblazinjenje med vašimi stolpci, ki se uporabljajo za odziven prostor in poravnavo vsebine v mrežnem sistemu Bootstrap.

Na tej strani

Kako delujejo

Žlebovi so vrzeli med vsebino stolpcev, ustvarjene z vodoravno padding. Nastavimo padding-rightin padding-leftna vsakem stolpcu in uporabimo negativno marginza izravnavo tega na začetku in koncu vsake vrstice za poravnavo vsebine.
Žlebovi se začnejo pri 1.5rem( 24px) širini. To nam omogoča, da svojo mrežo uskladimo z lestvico oblazinjenja in distančnikov robov .
Žlebove je mogoče odzivno prilagoditi. Uporabite razrede žlebov, specifične za točko prekinitve, da spremenite vodoravne žlebove, navpične žlebove in vse žlebove.

Horizontalni žlebovi

.gx-*razrede je mogoče uporabiti za nadzor horizontalnih širin žlebov. Nadrejeni element .containerali .container-fluidbo morda treba prilagoditi, če se uporabljajo tudi večji žlebovi, da se prepreči neželeno prelivanje, z uporabo ustreznega pripomočka za oblazinjenje. Na primer, v naslednjem primeru smo povečali oblazinjenje z .px-4:

Oblazinjenje stolpcev po meri

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>

Alternativna rešitev je dodati ovoj okoli .rowz .overflow-hiddenrazredom:

Oblazinjenje stolpcev po meri

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>

Vertikalni žlebovi

.gy-*razrede je mogoče uporabiti za nadzor navpičnih širin žlebov znotraj vrstice, ko se stolpci previjejo v nove vrstice. Tako kot vodoravni žlebovi lahko tudi navpični žlebovi povzročijo prelivanje pod .rowkoncem strani. .rowČe se to zgodi, z .overflow-hiddenrazredom dodate ovoj :

Oblazinjenje stolpcev po meri

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>

Horizontalni in vertikalni žlebovi

.g-*razrede lahko uporabite za nadzor vodoravnih širin žlebov, za naslednji primer uporabimo manjšo širino žlebov, tako da ne bo treba dodati .overflow-hiddenovojnega razreda.

Oblazinjenje stolpcev po meri

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>

Vrstni stebri žlebovi

Razrede žlebov je mogoče dodati tudi stolpcem vrstic . V naslednjem primeru uporabljamo odzivne stolpce vrstic in odzivne razrede žlebov.

Stolpec vrstice

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>

Brez žlebov

Žlebove med stolpci v naših vnaprej določenih mrežnih razredih lahko odstranite z .g-0. S tem se odstranijo negativni margins .rowin vodoravna črta paddingiz vseh neposrednih podrejenih stolpcev.

Potrebujete dizajn od roba do roba? Spustite nadrejeno .containerali .container-fluidin dodajte .mx-0v , .rowda preprečite prelivanje.

V praksi je takole videti. Upoštevajte, da lahko to še naprej uporabljate z vsemi drugimi vnaprej določenimi razredi mreže (vključno s širinami stolpcev, odzivnimi stopnjami, preurejanjem in drugim).

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

Zamenjaj žlebove

Razredi so zgrajeni iz $gutterszemljevida Sass, ki je podedovan od $spacerszemljevida Sass.

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