Dagiti kanal

Dagiti gutter ket isu ti padding iti nagbaetan dagiti adigim, a maus-usar a mangsungbat nga espasyo ken mangitunos ti linaon iti sistema ti grid ti Bootstrap.

Iti daytoy a panid

No kasano ti panagtrabahoda

Dagiti kanal ket dagiti giwang iti nagbaetan ti linaon ti adigi, a pinartuat babaen ti horizontal padding. Itakderanmi padding-rightken padding-leftiti tunggal kolum, ken usarenmi ti negatibo margintapno mai-offset dayta iti rugi ken ngudo ti tunggal linia tapno maitunos ti linaon.
Mangrugi dagiti kanal iti 1.5rem( 24px) a kalawa. Daytoy ket mangipalubos kadatayo a mangitunos ti gridtayo iti padding ken margin spacers scale.
Mabalin a responsive a maitunos dagiti kanal. Usaren dagiti breakpoint-specific a klase ti kanal tapno baliwan dagiti horizontal a kanal, bertikal a kanal, ken amin a kanal.

Paisaad dagiti kanal

.gx-*dagiti klase ket mabalin nga usaren a mangkontrol kadagiti horizontal a kalawa ti kanal. Mabalin a kasapulan a maitunos ti .containerwenno .container-fluidnagannak no mausar met dagiti dadakkel a kanal tapno maliklikan ti di matarigagayan a panaglablabes, nga agusar iti maitutop a padding utility. Kas pagarigan, iti sumaganad a pagarigan ket pinaadumi ti padding babaen ti .px-4:

Kostumbre nga padding ti kolum

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

Ti alternatibo a solusion ket ti pananginayon ti maysa a balkot iti aglawlaw ti .rowaddaan ti .overflow-hiddenklase:

Kostumbre nga padding ti kolum

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

Bertikal a kanal

.gy-*dagiti klase ket mabalin nga usaren a mangkontrol kadagiti bertikal a kalawa ti kanal. Kas kadagiti horizontal a kanal, dagiti bertikal a kanal ket mabalin a mangpataud iti sumagmamano a panaglablabes iti baba ti .rowiti ngudo ti maysa a panid. No mapasamak daytoy, manginayonka iti wrapper around .rowiti .overflow-hiddenklase:

Kostumbre nga padding ti kolum

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

Paisaad & bertikal nga kanal

.g-*dagiti klase ket mabalin nga usaren a mangkontrol kadagiti horizontal a kalawa ti kanal, para iti sumaganad a pagarigan ket agus-usarkami ti basbassit a kalawa ti kanal, isu nga awanto ti kasapulan a manginayon ti .overflow-hiddenklase ti balkot.

Kostumbre nga padding ti kolum

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

Hilera dagiti adigi dagiti kanal

Mabalin pay a mainayon dagiti klase ti gutter kadagiti adigi ti hilera . Iti sumaganad a pagarigan, agusartayo kadagiti responsive row columns ken responsive row classes.

Kolum ti hilera

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

Awan dagiti kanal

Dagiti kanal iti nagbaetan dagiti adigi kadagiti nasakbay a naikeddeng a klasetayo ti grid ket mabalin a maikkat babaen ti .g-0. Daytoy ket mangikkat ti negatibo nga margins manipud .rowken ti horisontal paddingmanipud kadagiti amin a dagus nga ubbing a kolum.

Kasapulan kadi ti disenio manipud iti igid agingga iti igid? Ibaba ti nagannak .containerwenno .container-fluid.

Iti praktis, adtoy ti langana. Imutektekanyo mabalinmo nga itultuloy nga usaren daytoy kadagiti amin a dadduma pay a nasakbay a naikeddeng a klase ti grid (a mairaman dagiti kalawa ti adigi, dagiti sumungbat a tukad, dagiti panagurnos manen, ken dadduma pay).

.kol-sm-6 .kol-md-8

.kol-6 .kol-md-4

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

Baliwan dagiti kanal

Dagiti klase ket naibangon manipud iti $guttersmapa ti Sass a daytoy ket natawid manipud iti $spacersmapa ti Sass.

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