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

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

Njira ina ndiyo kuwonjezera chokulunga mozungulira .rowndi .overflow-hiddenkalasi:

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>

Miyendo yoyima

.gy-*makalasi angagwiritsidwe ntchito kulamulira ofukula ngalande widths. Monga ngalande zopingasa, mitsinje yoyimirira imatha kuyambitsa kusefukira pansi .rowkumapeto kwa tsamba. Izi zikachitika, onjezerani chovala chozungulira .rowndi .overflow-hiddenkalasi:

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>

Zopingasa ndi zoyima

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

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>

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

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

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? Kugwetsa kholo .containerkapena .container-fluid.

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

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

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,
);