Ereszcsatornák

Az ereszcsatornák az oszlopok közötti párnázást jelentik, amelyek a Bootstrap rácsrendszerben a tartalom érzékeny elhelyezésére és igazítására szolgálnak.

Ezen az oldalon

Hogyan működnek

Az ereszcsatornák az oszlopok tartalma közötti rések, amelyeket a vízszintes hoz létre padding. Minden oszlopon beállítjuk a padding-rightés -t, és a negatív értéket az egyes sorok elején és végén a tartalom igazításához használjuk.padding-leftmargin
Az ereszcsatornák 1.5rem( 24px) szélességben kezdődnek. Ez lehetővé teszi, hogy rácsunkat a párnázási és margótávtartók skálájához igazítsuk .
Az ereszcsatornák érzékenyen állíthatók. Használjon töréspont-specifikus ereszcsatorna-osztályokat a vízszintes, függőleges ereszcsatornák és az összes ereszcsatorna módosításához.

Vízszintes ereszcsatornák

.gx-*osztályok használhatók a vízszintes ereszcsatorna-szélességek szabályozására. Előfordulhat , hogy a .containervagy .container-fluida szülőt módosítani kell, ha nagyobb ereszcsatornákat is használnak a nemkívánatos túlcsordulás elkerülése érdekében, egy megfelelő párnázási segédprogrammal. Például a következő példában a kitöltést a következővel növeltük .px-4:

Egyedi oszlop kitöltése

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>

Alternatív megoldás az, .rowha az .overflow-hiddenosztállyal egy burkolóanyagot adunk a következőhöz:

Egyedi oszlop kitöltése

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>

Függőleges ereszcsatornák

.gy-*osztályok használhatók a függőleges ereszcsatorna-szélességek szabályozására egy soron belül, amikor az oszlopok új sorokká válnak. A vízszintes ereszcsatornákhoz hasonlóan a függőleges ereszcsatornák is okozhatnak némi túlcsordulást az .rowoldal végén található jel alatt. Ha ez megtörténik, adjon hozzá egy burkot .rowaz .overflow-hiddenosztályhoz:

Egyedi oszlop kitöltése

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>

Vízszintes és függőleges ereszcsatornák

.g-*osztályok használhatók a vízszintes ereszszélességek szabályozására, a következő példában kisebb ereszcsatorna-szélességet használunk, így nem lesz szükség a .overflow-hiddenburkolási osztály hozzáadására.

Egyedi oszlop kitöltése

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>

Soroszlopok ereszcsatornák

Az ereszcsatorna osztályok soroszlopokhoz is hozzáadhatók . A következő példában reszponzív soroszlopokat és reszponzív ereszcsatorna osztályokat használunk.

Sor oszlop

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>

Nincs ereszcsatorna

Az előre definiált rácsosztályainkban az oszlopok közötti ereszcsatornák a -val eltávolíthatók .g-0. Ez eltávolítja a negatív margins-t az összes közvetlen alárendelt oszlopból .rowés a vízszintes elemet.padding

Széltől szélig terjedő tervezésre van szüksége? Dobd el a szülőt .containervagy .container-fluidés add hozzá .mx-0a .rowtúlcsordulás megelőzése érdekében.

A gyakorlatban így néz ki. Vegye figyelembe, hogy ezt továbbra is használhatja az összes többi előre definiált rácsosztályhoz (beleértve az oszlopszélességeket, az adaptív rétegeket, az átrendezéseket és egyebeket).

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

Cserélje ki az ereszcsatornákat

Az osztályok a Sass térképből épülnek fel, $guttersamely a Sass térképről öröklődik $spacers.

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