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 amacakubiri yihariye yo gutondeka kugirango uhindure imiyoboro itambitse, imiyoboro ihanamye, hamwe numuyoboro wose.

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

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>

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

Koresha inkingi

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>

Umuyoboro uhagaze

.gy-*amasomo arashobora gukoreshwa mugucunga ubugari bwa vertical ubugari mumurongo mugihe inkingi zizingiye kumurongo mushya. Kimwe na horizontal ya horizontal, vertical vertical irashobora gutera kurengerwa munsi .rowyurupapuro rwurupapuro. Niba ibi bibaye, wongeyeho igipfunyika .rowhamwe .overflow-hiddennishuri:

Koresha inkingi

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>

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

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>

Imirongo yumurongo

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

Inkingi

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>

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? Tera ababyeyi .containercyangwa .container-fluidwongere .mx-0kuri .rowkugirango wirinde kurengerwa.

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

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>

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