Mga kanal

Giunsa nila pagtrabaho

• Ang mga kanal mao ang mga kal-ang tali sa sulod sa kolum, nga gihimo sa pinahigda padding. Gibutang namon padding-rightug padding-leftsa matag kolum, ug gigamit ang negatibo marginaron mabawi kana sa pagsugod ug katapusan sa matag laray aron ipahiangay ang sulud.

• Ang mga kanal magsugod sa 1.5rem( 24px) gilapdon. Kini nagtugot kanamo sa pagpares sa among grid sa padding ug margin spacers scale.

• Ang mga kanal mahimong tubagon nga ipasibo. Gamita ang mga klase sa gutter nga espesipiko sa breakpoint aron usbon ang horizontal gutters, vertical gutters, ug tanang gutter.

Horizontal nga mga kanal

.gx-*Ang mga klase mahimong magamit aron makontrol ang pinahigda nga gilapdon sa gutter. Mahimong kinahanglan nga i-adjust ang .containero .container-fluidginikanan kung gamiton usab ang dagkong mga kanal aron malikayan ang dili gusto nga pag-awas, gamit ang usa ka matching padding utility. Pananglitan, sa mosunod nga pananglitan gidugangan namo ang padding sa .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 usa ka alternatibo nga solusyon mao ang pagdugang usa ka wrapper sa palibot sa .rowklase .overflow-hidden:

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

Vertikal nga mga kanal

.gy-*Ang mga klase mahimong magamit aron makontrol ang bertikal nga mga gilapdon sa gutter sulod sa usa ka laray kung ang mga kolum moputos sa bag-ong mga linya. Sama sa pinahigda nga mga kanal, ang mga bertikal nga kanal mahimong hinungdan sa pag-awas sa ubos .rowsa katapusan sa usa ka panid. Kung mahitabo kini, magdugang ka usa ka wrapper sa palibot .rowsa .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>

Horizontal ug bertikal nga mga kanal

.g-*Ang mga klase mahimong gamiton aron makontrol ang pinahigda nga mga gilapdon sa gutter, alang sa mosunod nga pananglitan naggamit kami og mas gamay nga gilapdon sa gutter, mao nga dili na kinahanglan nga idugang ang .overflow-hiddenklase sa 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>

Ang mga kolum sa laray mga kanal

Ang mga klase sa kanal mahimo usab nga idugang sa mga kolum sa laray . Sa mosunod nga pananglitan, gigamit namo ang responsive row columns ug responsive gutter classes.

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

Walay mga kanal

Ang mga kanal taliwala sa mga kolum sa among gitakda nang daan nga mga klase sa grid mahimong matangtang gamit ang .g-0. Gikuha niini ang negatibo nga margins gikan sa .rowug ang pinahigda paddinggikan sa tanan nga mga kolum sa mga bata.

Kinahanglan ang usa ka sulud sa sulud nga disenyo? Ihulog ang ginikanan .containero .container-fluidug idugang .mx-0sa .rowaron malikayan ang pag-awas.

Sa praktis, ania ang hitsura niini. Timan-i nga mahimo nimong ipadayon ang paggamit niini sa tanan nga uban pang gitakda nang daan nga mga klase sa grid (lakip ang mga gilapdon sa kolum, mga responsive nga lebel, pag-order usab, ug uban 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>

Usba ang mga kanal

Ang mga klase gitukod gikan sa $guttersmapa sa Sass nga napanunod gikan sa $spacersmapa sa Sass.

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