Canali

Il-kanali huma l-ikkuttunar bejn il-kolonni tiegħek, użati biex jispazjaw u jallinjaw il-kontenut b'mod reattiv fis-sistema tal-grilja Bootstrap.

Fuq din il-paġna

Kif jaħdmu

Il-kanali huma l-lakuni bejn il-kontenut tal-kolonna, maħluqa minn orizzontali padding. Aħna nissettjaw padding-rightu padding-leftfuq kull kolonna, u nużaw negattivi marginbiex nikkumpensaw dak fil-bidu u fit-tmiem ta 'kull ringiela biex tallinja l-kontenut.
Il-kanali jibdew minn 1.5rem( 24px) wiesgħa. Dan jippermettilna nqabblu l-grilja tagħna mal-iskala tal- padding u l-ispazjar tal-marġni .
Il-kanali jistgħu jiġu aġġustati b'mod reattiv. Uża klassijiet ta 'kanal speċifiċi għall-punt ta' waqfien biex timmodifika kanali orizzontali, kanali vertikali, u kanali kollha.

Canali orizzontali

.gx-*klassijiet jistgħu jintużaw biex jikkontrollaw il-wisgħat orizzontali kanali. Il -ġenitur .containerjew .container-fluidjista 'jeħtieġ li jiġi aġġustat jekk kanali akbar huma użati wkoll biex jiġi evitat overflow mhux mixtieq, bl-użu ta' utilità ta 'kuttunar tqabbil. Pereżempju, fl-eżempju li ġej aħna żidna l-ikkuttunar bi .px-4:

Kuttunar tal-kolonna apposta

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

Soluzzjoni alternattiva hija li żżid tgeżwir madwar il .row- .overflow-hiddenklassi:

Kuttunar tal-kolonna apposta

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

Canali vertikali

.gy-*klassijiet jistgħu jintużaw biex jikkontrollaw il-wisgħat tal-kanal vertikali. Bħall-kanali orizzontali, il-kanali vertikali jistgħu jikkawżaw xi overflow taħt il- .rowfl-aħħar ta 'paġna. Jekk iseħħ dan, żid tgeżwir .rowmal- .overflow-hiddenklassi:

Kuttunar tal-kolonna apposta

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

Canali orizzontali u vertikali

.g-*klassijiet jistgħu jintużaw biex jikkontrollaw il-wisa 'kanal orizzontali, għall-eżempju li ġej nużaw wisa' iżgħar tal-kanal, għalhekk mhux se jkun hemm bżonn li żżid il- .overflow-hiddenklassi tat-tgeżwir.

Kuttunar tal-kolonna apposta

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

Filiela kolonni kanali

Il-klassijiet tal-kanal jistgħu jiġu miżjuda wkoll mal -kolonni tar-ringiela . Fl-eżempju li ġej, nużaw kolonni ta 'ringieli li jirrispondu u klassijiet ta' kanali li jirrispondu.

Kolonna ringiela

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

Ebda kanali

Il-kanali bejn il-kolonni fil-klassijiet tal-grilja predefiniti tagħna jistgħu jitneħħew b' .g-0. Dan ineħħi l-i negattivi marginminn .rowu l-orizzontali paddingmill-kolonni tat-tfal immedjati kollha.

Għandek bżonn disinn minn tarf għal tarf? Waqqa 'l-ġenitur .containerjew .container-fluid.

Fil-prattika, hawn kif tidher. Innota li tista 'tkompli tuża dan mal-klassijiet l-oħra kollha tal-grilja predefiniti (inklużi wisa' tal-kolonni, livelli li jirrispondu, ordnijiet mill-ġdid, u aktar).

.col-sm-6 .col-md-8

.col-6 .col-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>

Ibdel il-kanali

Il-klassijiet jinbnew mill- $guttersmappa Sass li tintiret mill- $spacersmappa Sass.

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