Erretenak

Gutters zure zutabeen arteko betegarria da, Bootstrap sareta sisteman edukia modu erantzunkidean espazioratzeko eta lerrokatzeko erabiltzen direnak.

Orrialde honetan

Nola funtzionatzen duten

Gutters zutabeen edukiaren arteko hutsuneak dira, horizontalek sortutakoak padding. padding-rightZutabe bakoitzean eta ezartzen dugu padding-left, eta negatiboa erabiltzen margindugu 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 .containeredo .container-fluidgurasoa 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:

Zutabeen betegarri pertsonalizatua

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>

Soluzio alternatibo bat klasearekin bilgarri bat gehitzea .rowda .overflow-hidden:

Zutabeen betegarri pertsonalizatua

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>

Erretenak bertikalak

.gy-*klaseak errenkada baten barruan erretenaren zabalera bertikalak kontrolatzeko erabil daitezke zutabeak lerro berrietara biltzen direnean. Erretenak horizontalek bezala, erretenak bertikalek gainezka .rowegin dezakete orrialde baten amaieran. Hau gertatzen bada, gehitzen duzu bilgarri bat .rowklasearekin .overflow-hidden:

Zutabeen betegarri pertsonalizatua

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>

Erretenak horizontalak eta bertikalak

.g-*klaseak erretenaren zabalera horizontalak kontrolatzeko erabil daitezke, hurrengo adibiderako erretenaren zabalera txikiagoa erabiltzen dugu, beraz, ez da .overflow-hiddenwrapper klasea gehitu beharrik izango.

Zutabeen betegarri pertsonalizatua

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>

Ilara-zutabeak erretenak

Gutter klaseak errenkadako zutabeetan ere gehi daitezke . Hurrengo adibidean, errenkada-zutabe erantzunak eta gutter klaseak erabiltzen ditugu.

Errenkadako zutabea

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>

Erretenak ez

Aurrez definitutako gure sareta-klaseetako zutabeen arteko erretenak ken daitezke .g-0. Honek berehalako zutabe seme-alaba guztien margins negatiboa .roweta horizontala kentzen ditu.padding

Ertz-ertzeko diseinua behar duzu? Jaregin gurasoa .containeredo .container-fluideta gehitu .mx-0gainezka .rowekiditeko.

Praktikan, hona hemen nolakoa den. Kontuan izan aurrez zehaztutako sareko beste klase guztiekin erabiltzen jarrai dezakezula (zutabeen zabalerak, erantzun-mailak, berrantolaketak eta abar barne).

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

Aldatu erretenak

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