Erretenak
Gutters zure zutabeen arteko betegarria da, Bootstrap sareta sisteman edukia modu erantzunkidean espazioratzeko eta lerrokatzeko erabiltzen direnak.
Nola funtzionatzen duten
-
Gutters zutabeen edukiaren arteko hutsuneak dira, horizontalek sortutakoak
padding
.padding-right
Zutabe bakoitzean eta ezartzen dugupadding-left
, eta negatiboa erabiltzenmargin
dugu errenkada bakoitzaren hasieran eta amaieran edukia lerrokatzeko. -
Erretenak
1.5rem
(24px
) zabalean hasten dira. Horri esker, gure sareta betegarri eta marjina-tarteen eskalarekin bat etor daiteke. -
Erretenak modu erreaktiboan egokitu daitezke. Erabili eten puntuko erreten-klase espezifikoak erretenak horizontalak, erretenak bertikalak eta erretenak guztiak aldatzeko.
Erretenak horizontalak
.gx-*
klaseak erretenaren zabalera horizontalak kontrolatzeko erabil daitezke. Baliteke .container
edo .container-fluid
gurasoa egokitu behar izatea erretenak ere handiagoak erabiltzen badira nahi ez den gainezka ekiditeko, bat datorren betegarrien erabilgarritasuna erabiliz. Adibidez, hurrengo adibidean betegarria gehitu dugu honekin .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>
Soluzio alternatibo bat klasearekin bilgarri bat gehitzea .row
da .overflow-hidden
:
<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>
Erretenak bertikalak
.gy-*
klaseak erretenaren zabalera bertikalak kontrolatzeko erabil daitezke. Erretenak horizontalek bezala, erretenak bertikalek gainezka .row
egin dezakete orrialde baten amaieran. Hau gertatzen bada, gehitzen duzu bilgarri bat .row
klasearekin .overflow-hidden
:
<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>
Erretenak horizontalak eta bertikalak
.g-*
klaseak erretenaren zabalera horizontalak kontrolatzeko erabil daitezke, hurrengo adibiderako erretenaren zabalera txikiagoa erabiltzen dugu, beraz, ez da .overflow-hidden
wrapper klasea gehitu beharrik izango.
<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>
Ilara-zutabeak erretenak
Gutter klaseak errenkadako zutabeetan ere gehi daitezke . Hurrengo adibidean, errenkada-zutabe erantzunak eta gutter klaseak erabiltzen ditugu.
<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>
Erretenak ez
Aurrez definitutako gure sareta-klaseetako zutabeen arteko erretenak ken daitezke .g-0
. Honek berehalako zutabe seme-alaba guztien margin
s negatiboa .row
eta horizontala kentzen ditu.padding
Ertz-ertzeko diseinua behar duzu? Jarri gurasoa .container
edo .container-fluid
.
Praktikan, hona hemen nolakoa den. Kontuan izan aurrez zehaztutako sareko beste klase guztiekin erabiltzen jarrai dezakezula (zutabeen zabalerak, erantzun-mailak, berrantolaketak eta abar barne).
<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>
Aldatu erretenak
$gutters
Klaseak Sass mapatik heredatzen den Sass mapatik eraikitzen dira $spacers
.
$grid-gutter-width: 1.5rem;
$gutters: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
);