Ž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
. Nastavimopadding-right
inpadding-left
na vsakem stolpcu in uporabimo negativnomargin
za 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 .container
ali .container-fluid
bo 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
:
<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 .row
z .overflow-hidden
razredom:
<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 .row
koncem strani. .row
Če se to zgodi, z .overflow-hidden
razredom dodate ovoj :
<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-hidden
ovojnega razreda.
<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.
<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 margin
s .row
in vodoravna črta padding
iz vseh neposrednih podrejenih stolpcev.
Potrebujete dizajn od roba do roba? Izpustite nadrejeno .container
ali .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).
<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 $gutters
zemljevida Sass, ki je podedovan od $spacers
zemljevida Sass.
$grid-gutter-width: 1.5rem;
$gutters: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
);