Laktawan ti kangrunaan a linaon Laktawan ti docs navigation
in English

Dagiti kanal

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

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
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
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
Kostumbre nga padding ti kolum
Kostumbre nga padding ti kolum
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
Kostumbre nga padding ti kolum
Kostumbre nga padding ti kolum
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

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

Kolum ti hilera
Kolum ti hilera
Kolum ti hilera
Kolum ti hilera
Kolum ti hilera
Kolum ti hilera
Kolum ti hilera
Kolum ti hilera
Kolum ti hilera
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,
);