Mitsinje

Gutters ndi padding pakati pa zipilala zanu, zomwe zimagwiritsidwa ntchito poyang'anira malo ndikugwirizanitsa zomwe zili mu Bootstrap grid system.

Patsamba ili

Momwe amagwirira ntchito

Mitsinje ndi mipata pakati pa zomwe zili pamndandanda, zopangidwa ndi zopingasa padding. Timayika padding-rightndi padding-leftpagawo lililonse, ndikugwiritsa ntchito negative marginkuti tithetsere kumayambiriro ndi kumapeto kwa mzere uliwonse kuti tigwirizane ndi zomwe zili.
Mitsinje imayambira pa 1.5rem( 24px) m'lifupi. Izi zimatithandiza kufananiza gridi yathu ndi ma padding ndi ma margin spacers .
Gutters akhoza kusinthidwa moyenera. Gwiritsani ntchito makalasi ophatikizika a breakpoint kuti musinthe ma gutter opingasa, mitsuko yoyima, ndi ngalande zonse.

Miyendo yopingasa

.gx-*makalasi angagwiritsidwe ntchito kulamulira yopingasa ngalande widths. Kholo .containerkapena .container-fluidkholo lingafunike kusinthidwa ngati ma gutters akuluakulu agwiritsidwanso ntchito kuti apewe kusefukira kosafunikira, pogwiritsa ntchito zofananira. Mwachitsanzo, mu chitsanzo chotsatirachi tawonjezera padding ndi .px-4:

Custom column padding

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>

Njira ina ndiyo kuwonjezera wrapper kuzungulira .rowndi .overflow-hiddenkalasi:

Custom column padding

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>

Miyendo yoyima

.gy-*makalasi angagwiritsidwe ntchito kuwongolera m'lifupi mwa mizere yoyima mkati mwa mzere pamene mizati ikulungidwa ku mizere yatsopano. Monga ngalande zopingasa, ngalande zoyima zingayambitse kusefukira pansi .rowkumapeto kwa tsamba. Izi zikachitika, onjezerani chovala chozungulira .rowndi .overflow-hiddenkalasi:

Custom column padding

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>

Zopingasa komanso zoyima

.g-*makalasi atha kugwiritsidwa ntchito kuwongolera makulidwe opingasa, mwachitsanzo, timagwiritsa ntchito kachulukidwe kakang'ono ka ngalande, kotero sipadzafunika kuwonjezera gulu la .overflow-hiddenwrapper.

Custom column padding

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>

Mizere mizere ngalande

Maphunziro a gutter amathanso kuwonjezeredwa ku mizere ya mizere . M'chitsanzo chotsatirachi, timagwiritsa ntchito mizere yoyankha ndi makalasi omvera.

Mzere wa mzere

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>

Palibe ngalande

Miyendo pakati pa mizati m'magulu athu omwe tafotokozeratu amatha kuchotsedwa ndi .g-0. Izi zimachotsa zoipa margins kuchokera .rowndi yopingasa paddingkuchokera mzati zonse za ana.

Mukufuna mapangidwe am'mphepete mpaka m'mphepete? Siyani kholo .containerkapena .container-fluidonjezerani .mx-0kuti .rowmupewe kusefukira.

Mwakuchita, umu ndi momwe zimawonekera. Zindikirani kuti mutha kupitiliza kugwiritsa ntchito izi ndi makalasi ena onse omwe afotokozedweratu (kuphatikiza makulidwe amzere, magawo omvera, kuyitanitsa, ndi zina zambiri).

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

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

Kusintha madzi

Maphunziro amapangidwa kuchokera pamapu a $guttersSass omwe $spacersamatengera mapu a Sass.

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