Preskoči na glavno vsebino Preskoči na navigacijo po dokumentih
in English

Žlebovi

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

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
Oblazinjenje stolpcev po meri
<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>

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

Oblazinjenje stolpcev po meri
Oblazinjenje stolpcev po meri
<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>

Vertikalni žlebovi

.gy-*razrede lahko uporabite za nadzor navpičnih širin žlebov. 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
Oblazinjenje stolpcev po meri
Oblazinjenje stolpcev po meri
Oblazinjenje stolpcev po meri
<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>

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
Oblazinjenje stolpcev po meri
Oblazinjenje stolpcev po meri
Oblazinjenje stolpcev po meri
<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>

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

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? Izpustite nadrejeno .containerali .container-fluid.

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

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