in English

Ama-Gutters

Ama-Gutters yi-padding phakathi kwamakholomu akho, asetshenziselwa ukusabela isikhala nokuqondanisa okuqukethwe ohlelweni lwegridi ye-Bootstrap.

Kuleli khasi

Basebenza kanjani

Amagatha ayizikhala phakathi kokuqukethwe kwekholomu, adalwe ngokuvundlile padding. Sisetha padding-rightnakukholomu padding-leftngayinye, futhi sisebenzisa negative marginukuze sisuse lokho ekuqaleni nasekupheleni komugqa ngamunye ukuze siqondanise okuqukethwe.
Amagatha aqala kokuthi 1.5rem( 24px) ububanzi. Lokhu kusivumela ukuthi sifanise igridi yethu nesikali se- padding kanye ne-margin spacers .
Ama-gutters angalungiswa ngokuphendula. Sebenzisa amakilasi e-gutter aqondene ne-breakpoint ukuze ulungise ama-gutters avundlile, ama-gutters aqondile, nawo wonke ama-gutters.

Ama-gutters avundlile

.gx-*amakilasi angasetshenziswa ukulawula ububanzi be-gutter obuvundlile. Umzali .containernoma .container-fluidumzali angase adinge ukulungiswa uma ama-gutters amakhulu esetshenziswa futhi ukugwema ukuchichima okungafuneki, kusetshenziswa insiza yokunamathisela ehambisanayo. Isibonelo, esibonelweni esilandelayo sikhulise ukuphedi nge- .px-4:

Ukupheda kwekholomu ngokwezifiso

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

Esinye isixazululo ukufaka isembozo esizungeze .rowikilasi .overflow-hidden:

Ukupheda kwekholomu ngokwezifiso

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

Ama-gutters aqondile

.gy-*amakilasi angasetshenziswa ukulawula ububanzi obuqondile be-gutter. Njengamagatha avundlile, amagatha amile angabangela ukuchichima okuthile ngezansi .rowekugcineni kwekhasi. Uma lokhu kwenzeka, wengeza i-wrapper ezungeze .rownekilasi .overflow-hidden:

Ukupheda kwekholomu ngokwezifiso

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

Amagatha avundlile & mpo

.g-*amakilasi angasetshenziswa ukulawula ububanzi be-gutter obuvundlile, isibonelo esilandelayo sisebenzisa ububanzi obuncane be-gutter, ngakho-ke ngeke kube nesidingo sokwengeza .overflow-hiddenisigaba se-wrapper.

Ukupheda kwekholomu ngokwezifiso

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

Amakholomu emigqa amagatha

Amakilasi e-Gutter nawo angangezwa kumakholomu emigqa . Esibonelweni esilandelayo, sisebenzisa amakholomu emigqa esabelayo kanye namakilasi e-gutter aphendulayo.

Ikholomu yomugqa

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

Awekho ama-gutters

Ama-gutters aphakathi kwamakholomu kumakilasi ethu egridi achazwe kusengaphambili angasuswa ngokuthi .g-0. Lokhu kususa okuthi-negethivu u- margins kusuka .rowkanye nokuvundlile paddingkuwo wonke amakholomu ezingane.

Udinga idizayini esukela konqenqemeni ukuya konqenqemeni? Lahla umzali .containernoma .container-fluid.

Ngokusebenza, nansi indlela ebukeka ngayo. Qaphela ukuthi ungaqhubeka nokusebenzisa lokhu nawo wonke amanye amakilasi egridi achazwe ngaphambilini (okuhlanganisa ububanzi bekholomu, izigaba ezisabelayo, ukuhlela kabusha, nokuningi).

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

Shintsha ama-gutters

Amakilasi akhiwe kumephu ye- $guttersSass ezuzwa njengefa $spacerskumephu ye-Sass.

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