Mga kanal

Paano sila gumagana

• Ang mga kanal ay ang mga puwang sa pagitan ng nilalaman ng column, na nilikha ng pahalang padding. Itinakda namin padding-rightat padding-leftsa bawat column, at gumagamit kami ng negatibo marginpara 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 .containero .container-fluidmagulang 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 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>

Ang isang alternatibong solusyon ay ang magdagdag ng isang wrapper sa paligid ng .rowkasama ang .overflow-hiddenklase:

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

Mga patayong kanal

.gy-*maaaring gamitin ang mga klase upang kontrolin ang mga vertical na lapad ng gutter sa loob ng isang row kapag bumabalot ang mga column sa mga bagong linya. Tulad ng mga pahalang na kanal, ang mga patayong kanal ay maaaring magdulot ng ilang pag-apaw sa ibaba ng .rowsa dulo ng isang pahina. Kung nangyari ito, magdagdag ka ng isang wrapper sa paligid .rowng .overflow-hiddenklase:

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

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-hiddenklase ng wrapper.

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

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

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 margins mula sa .rowat ang pahalang paddingmula sa lahat ng mga column ng agarang bata.

Kailangan ng isang gilid-sa-gilid na disenyo? I-drop ang magulang .containero .container-fluidat idagdag .mx-0sa .rowpara maiwasan ang pag-apaw.

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

Baguhin ang mga kanal

Binuo ang mga klase mula sa $guttersmapa ng Sass na minana mula sa $spacersmapa 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,
);