Diphaephe tša go tšhela meetse

Di-gutter ke padding magareng ga dikholomo tša gago, yeo e šomišwago go sekgoba ka go arabela le go logaganya diteng ka go tshepedišo ya keriti ya Bootstrap.

Letlakaleng le

Kamoo di šomago ka gona

Di-gutter ke dikgoba magareng ga diteng tša kholomo, tšeo di hlotšwego ke go rapalala padding. Re beakanya padding-rightle padding-leftgodimo ga kholomo ye nngwe le ye nngwe, gomme re šomiša negative margingo offset seo mathomong le mafelelong a mothalo wo mongwe le wo mongwe go logaganya diteng.
Di-gutter di thoma ka 1.5rem( 24px) ka bophara. Se se re dumelela go swantšha keriti ya rena le sekala sa padding le margin spacers .
Gutters ka arabela fetolwa. Diriša dihlopha tša diphaephe tše di itšego tša breakpoint go fetoša diphaephe tše di rapaletšego, diphaephe tše di emego thwii le diphaephe ka moka.

Di-gutter tše di rapaletšego

.gx-*diklase ka sebediswa ho laola rapameng gutter widths. Motswadi .containergoba .container-fluidmotswadi a ka swanelwa ke go lokišwa ge e ba diphaephe tše dikgolo le tšona di dirišwa go phema go tlala mo go sa nyakegego, go dirišwa sedirišwa sa go tlatša seo se swanago. Mohlala, mohlaleng o latelang re okeditše padding ka .px-4:

Padding ya kholomo ya tlwaelo

html

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

Tharollo e nngwe ke go oketša sephuthelwana go dikologa .rowka .overflow-hiddensehlopha:

Padding ya kholomo ya tlwaelo

html

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

Di-gutter tše di emego thwii

.gy-*diklase di ka šomišwa go laola bophara bja diphaephe tša go ema thwii ka gare ga mothaladi ge dikholomo di phuthela go ya go mela ye mefsa. Go swana le diphaephe tše di rapaletšego, diphaephe tše di emego thwii di ka baka go tlala mo gongwe ka tlase ga .rowmafelelong a letlakala. Ge se se direga, o tlaleletša ka sephuthelwana go dikologa .rowle .overflow-hiddensehlopha:

Padding ya kholomo ya tlwaelo

html

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

Di-gutter tše di rapaletšego & tše di emego thwii

.g-*diklase di ka šomišwa go laola bophara bja gutter bjo bo rapaletšego, bakeng sa mohlala wo o latelago re diriša bophara bjo bonyenyane bja gutter, ka gona go ka se be le tlhokego ya go oketša .overflow-hiddensehlopha sa sephuthedi.

Padding ya kholomo ya tlwaelo

html

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

Mothaladi dikholomo gutters

Diklase tša diphaephe le tšona di ka okeletšwa go dikholomo tša mothalo . Mohlaleng wo o latelago, re šomiša dikholomo tša mothaladi tše di arabelago le diklase tša gutter tše di arabelago.

Kholomo ya mothaladi

html

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

Ga go na diphaephe tša go tšhela meetse

Diphaephe magareng ga dikholomo ka diklaseng tša rena tša keriti tše di hlalošitšwego e sa le pele di ka tlošwa ka .g-0. Se se tloša margins ye mpe go tšwa .rowle ye e rapaletšego paddinggo tšwa go dikholomo ka moka tša bana tša kgauswi.

O hloka tlhamo ya go tloga mošito go ya mošito? Lahlela motswadi .containergoba .container-fluidgomme o tlaleletše .mx-0go .rowgo thibela go tlala.

Ka go diragatša, mo ke ka fao e lebelegago ka gona. Hlokomela o ka tšwela pele go šomiša se ka diklase tše dingwe ka moka tša keriti tše di hlalošitšwego e sa le pele (go akaretšwa bophara bja dikholomo, magato a go arabela, ditaelo gape, le tše dingwe).

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

.kol-6 .kol-md-4

html

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

Fetola di-gutter

Diklase di agilwe go tšwa $guttersmmapeng wa Sass wo o abetšwego go tšwa $spacersmmapeng wa Sass.

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