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.
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 apadding-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-left
margin
-
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 .container
vagy .container-fluid
a 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
:
<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>
Alternatív megoldás az, .row
ha az .overflow-hidden
osztállyal egy burkolóanyagot adunk a következőhöz:
<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>
Függőleges ereszcsatornák
.gy-*
osztályok használhatók a függőleges ereszcsatorna-szélességek szabályozására. A vízszintes ereszcsatornákhoz hasonlóan a függőleges ereszcsatornák is okozhatnak némi túlcsordulást az .row
oldal végén található jel alatt. Ha ez megtörténik, adjon hozzá egy burkot .row
az .overflow-hidden
osztályhoz:
<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>
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-hidden
burkolóosztály hozzáadására.
<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>
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.
<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>
Nincs ereszcsatorna
Az előre definiált rácsosztályainkban lévő oszlopok közötti ereszcsatornák a -val eltávolíthatók .g-0
. Ez eltávolítja a negatív margin
s-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 .container
vagy .container-fluid
.
A gyakorlatban így néz ki. Ne feledje, hogy ezt továbbra is használhatja az összes többi előre meghatározott rácsosztályhoz (beleértve az oszlopszélességeket, az adaptív rétegeket, az átrendezéseket és egyebeket).
<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>
Cserélje ki az ereszcsatornákat
Az osztályok a Sass térképből épülnek fel, $gutters
amely 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,
);