Mga kanal
Ang mga gutter ay ang padding sa pagitan ng iyong mga column, na ginagamit upang tumutugon sa espasyo at pag-align ng content sa Bootstrap grid system.
Paano sila gumagana
-
Ang mga kanal ay ang mga puwang sa pagitan ng nilalaman ng column, na nilikha ng pahalang
padding
. Itinakda naminpadding-right
atpadding-left
sa bawat column, at gumagamit kami ng negatibomargin
para i-offset iyon sa simula at dulo ng bawat row para i-align ang content. -
Ang mga alulod ay nagsisimula sa
1.5rem
(24px
) ang lapad. Nagbibigay-daan ito sa amin na itugma ang aming grid sa padding at margin spacer scale. -
Ang mga kanal ay maaaring tumutugon sa pagsasaayos. Gumamit ng mga klase ng gutter na tukoy sa breakpoint para baguhin ang mga pahalang na gutter, vertical gutters, at lahat ng gutter.
Pahalang na mga kanal
.gx-*
maaaring gamitin ang mga klase upang kontrolin ang mga pahalang na lapad ng kanal. Maaaring kailanganin ang .container
o .container-fluid
magulang na ayusin kung ang mas malalaking kanal ay ginagamit din upang maiwasan ang hindi gustong pag-apaw, gamit ang isang katugmang padding utility. Halimbawa, sa sumusunod na halimbawa, pinalaki namin ang padding ng .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>
Ang isang alternatibong solusyon ay ang magdagdag ng isang wrapper sa paligid ng .row
kasama ang .overflow-hidden
klase:
<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>
Mga patayong kanal
.gy-*
maaaring gamitin ang mga klase upang kontrolin ang mga vertical na lapad ng gutter. Tulad ng mga pahalang na kanal, ang mga patayong kanal ay maaaring magdulot ng ilang pag-apaw sa ibaba ng .row
sa dulo ng isang pahina. Kung nangyari ito, magdagdag ka ng isang wrapper sa paligid .row
ng .overflow-hidden
klase:
<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>
Pahalang at patayong kanal
.g-*
maaaring gamitin ang mga klase upang kontrolin ang mga pahalang na lapad ng kanal, para sa sumusunod na halimbawa ay gumagamit kami ng mas maliit na lapad ng kanal, kaya hindi na kailangang idagdag ang .overflow-hidden
klase ng wrapper.
<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>
Mga gutter ng row column
Ang mga klase ng kanal ay maaari ding idagdag sa mga hanay ng hilera . Sa sumusunod na halimbawa, gumagamit kami ng mga tumutugong column ng row at tumutugon na mga klase ng gutter.
<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>
Walang gutters
Maaaring alisin ang mga gutter sa pagitan ng mga column sa aming mga paunang natukoy na klase ng grid gamit ang .g-0
. Inaalis nito ang mga negatibong margin
s mula sa .row
at ang pahalang padding
mula sa lahat ng mga column ng agarang bata.
Kailangan ng isang gilid-sa-gilid na disenyo? Ihulog ang magulang .container
o .container-fluid
.
Sa pagsasagawa, narito ang hitsura nito. Tandaan na maaari mong patuloy na gamitin ito sa lahat ng iba pang mga paunang natukoy na klase ng grid (kabilang ang mga lapad ng column, tumutugon na mga tier, muling pagkakaayos, at higit pa).
<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>
Baguhin ang mga kanal
Binuo ang mga klase mula sa $gutters
mapa ng Sass na minana mula sa $spacers
mapa ng Sass.
$grid-gutter-width: 1.5rem;
$gutters: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
);