Gutters

Gutters ndiwo padding pakati pemakoramu ako, anoshandiswa kuita nzvimbo uye kurongedza zvirimo muBootstrap grid system.

Pa peji ino

Mashandiro avanoita

Gutters ndiwo maburi ari pakati pe column content, yakagadzirwa ne horizontal padding. Isu tinoseta padding-rightuye padding-leftpane yega yega koramu, uye shandisa zvisina kunaka marginkumisa izvo pakutanga uye pakupera kwemutsara wega wega kurongedza zvirimo.
Magetsi anotangira pa 1.5rem( 24px) zvakafara. Izvi zvinotibvumira kufananidza grid yedu kune padding uye margin spacers chiyero.
Gutters inogona kugadziriswa nemhinduro. Shandisa breakpoint-specific gutter makirasi kugadzirisa akachinjika magita, magita akatwasuka, uye ese magita.

Horizontal gutters

.gx-*makirasi anogona kushandiswa kudzora yakachinjika gutter upamhi. Iyo .containerkana .container-fluidmubereki angangoda kugadziridzwa kana magita akakura akashandiswawo kudzivirira mafashama asingadiwe, uchishandisa chinofananidzira padding utility. Semuenzaniso, mumuenzaniso unotevera takawedzera padding ne .px-4:

Custom column padding

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

Imwe mhinduro ndeyekuwedzera wrapper yakatenderedza .rowiyo .overflow-hiddennekirasi:

Custom column padding

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

Vertical gutters

.gy-*makirasi anogona kushandiswa kudzora vertical gutter wides. Kufanana nemagita akachinjika, magita akatwasuka anogona kukonzera kufashama pazasi .rowpekupera kwepeji. Kana izvi zvikaitika, iwe unowedzera wrapper yakatenderedza .rownekirasi .overflow-hidden:

Custom column padding

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

Horizontal & vertical gutters

.g-*makirasi anogona kushandiswa kudzora yakachinjika gutter hupamhi, kumuenzaniso unotevera isu tinoshandisa diki gutter upamhi, saka hapazove nechikonzero chekuwedzera .overflow-hiddenkirasi yekuputira.

Custom column padding

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

Row columns marata

Gutter makirasi anogona zvakare kuwedzerwa kune mitsara makoramu . Mumuenzaniso unotevera, tinoshandisa mitsara inoteerera mitsara uye makirasi anopindura egutter.

Row column

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

Hapana marata

Magetsi ari pakati pemakoramu mumakirasi edu akatemerwa grid anogona kubviswa ne .g-0. Izvi zvinobvisa iyo inegetive margins kubva .rowuye yakachinjika paddingkubva kune ese ariko vana makoramu.

Unoda kumucheto-kune-kumucheto dhizaini? Donhedza mubereki .containerkana .container-fluid.

Mukuita, heino maitiro ayo anotaridzika. Ziva kuti unogona kuenderera mberi nekushandisa izvi nemamwe ese akafanotsanangurwa makirasi egidhi (kusanganisira column wides, anopindura tiers, reorder, nezvimwe).

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

Shandura magita

Makirasi anovakwa kubva $gutterskuSass mepu inogarwa nhaka kubva $spacerskuSass mepu.

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