Gutera

Gutera ni padi hagati yinkingi zawe, zikoreshwa kumwanya ushimishije no guhuza ibiri muri sisitemu ya Bootstrap.

Kuriyi page

Uburyo bakora

Imyanda ni icyuho kiri hagati yinkingi, cyakozwe na horizontal padding. Dushiraho padding-rightno padding-leftkuri buri nkingi, kandi dukoreshe ibibi marginkugirango dusibe ko mugitangira nimpera ya buri murongo kugirango duhuze ibirimo.
Imyanda itangirira kuri 1.5rem( 24px) ubugari. Ibi biradufasha guhuza gride yacu kuri padding na margin spacers umunzani .
Imyanda irashobora guhindurwa neza. Koresha ibice byihariye byo gutondeka kugirango uhindure imiyoboro itambitse, imiyoboro ihanamye, hamwe n'amazi yose.

Umuyoboro utambitse

.gx-*amasomo arashobora gukoreshwa mugucunga ubugari bwa horizontal. Umubyeyi .containercyangwa .container-fluidumubyeyi arashobora gukenera guhindurwa niba imiyoboro minini ikoreshwa nayo kugirango wirinde kurengerwa, udakoresheje padi yingirakamaro. Kurugero, murugero rukurikira twongereye padi hamwe na .px-4:

Koresha inkingi

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

Ubundi buryo bwo gukemura ni ukongeramo igipfunyika hafi .rowyishuri .overflow-hidden:

Koresha inkingi

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

Umuyoboro uhagaze

.gy-*amasomo arashobora gukoreshwa mugucunga vertical gutter ubugari. Kimwe na horizontal ya horizontal, vertical vertical irashobora gutera kurengerwa munsi .rowyurupapuro rwurupapuro. Niba ibi bibaye, wongeyeho igipfunyika .rowhamwe .overflow-hiddennishuri:

Koresha inkingi

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

Gorizontal & vertical gutter

.g-*amasomo arashobora gukoreshwa mugucunga ubugari bwa horizontal, kurugero rukurikira dukoresha ubugari buto buto, ntabwo rero bizaba ngombwa kongeramo urwego .overflow-hidden.

Koresha inkingi

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

Imirongo yumurongo

Amasomo ya Gutter arashobora kandi kongerwaho kumurongo . Murugero rukurikira, dukoresha umurongo utanga umurongo winkingi hamwe nibisubizo byamazi.

Inkingi

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

Nta miyoboro

Imyanda iri hagati yinkingi mubyiciro byateganijwe mbere ya grid irashobora gukurwaho hamwe .g-0. Ibi bivanaho ibintu bibi marginbiva kuri .rowna horizontal paddingkuva abana bose bahita.

Ukeneye igishushanyo mbonera? Kureka ababyeyi .containercyangwa .container-fluid.

Mu myitozo, dore uko isa. Icyitonderwa urashobora gukomeza gukoresha ibi hamwe nibindi byose byateganijwe mbere ya gride (harimo ubugari bwinkingi, urwego rwitabira, reorders, nibindi byinshi).

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

Hindura imyanda

Amasomo yubatswe kuva ku $guttersikarita ya Sass yarazwe ku $spacersikarita ya Sass.

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