Swidziva swa le matini

Ti gutters i padding exikarhi ka tikholomu ta wena, leyi tirhisiwaka ku hlamula ndhawu na ku ringanisa swilo eka sisiteme ya giridi ya Bootstrap.

Eka tluka leri

Ndlela leyi ti tirhaka ha yona

Ti- gutter i swivandla leswi nga exikarhi ka leswi nga endzeni ka kholomo, leswi endliwaka hi horizontal padding. Hi veka padding-rightna padding-leftle ka kholomo yin’wana na yin’wana, naswona hi tirhisa negative marginku offset sweswo eku sunguleni na le makumu ka layini yin’wana na yin’wana ku ringanisa nhundzu.
Ti- gutter ti sungula hi 1.5rem( 24px) hi ku anama. Leswi swi hi pfumelela ku fambisana na gridi ya hina na xikalo xa padding na margin spacers .
Ti gutters tinga lulamisiwa hiku hlamula. Tirhisa titlilasi ta gutter leti kongomisiweke eka breakpoint ku cinca ti gutter leti nga etlhelo, ti gutter leti yimisiweke, na ti gutter hinkwato.

Ti- gutter leti nga etlhelo

.gx-*titlilasi tinga tirhisiwa ku lawula ti horizontal gutter widths. Mutswari .containerkumbe .container-fluidmutswari a nga ha lava ku lulamisiwa loko ku tirhisiwa ti- gutter letikulu na tona leswaku ku papalatiwa ku tala loku nga laviwiki, hi ku tirhisa xitirhisiwa xa padding lexi fambisanaka na xona. Xikombiso, eka xikombiso lexi landzelaka hi engeterile ku padding hi .px-4:

Ku padding ka kholomo ya ntolovelo

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>

Ntlhantlho wun’wana i ku engetela xifunengeto ku rhendzela the .rowna .overflow-hiddentlilasi:

Ku padding ka kholomo ya ntolovelo

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>

Ti- gutter leti yimisiweke

.gy-*titlilasi tinga tirhisiwa ku lawula ku anama ka gutter leyi yimisiweke endzeni ka layini loko tikholomu ti phutsela kuya eka milayeni leyintshwa. Kufana na ti horizontal gutters, ti vertical gutters tinga endla leswaku kuva na ku tala nyana ehansi ka .rowemakumu ka tluka. Loko leswi swi humelela, u engetela xifunengeto ku rhendzeleka .rowna .overflow-hiddentlilasi:

Ku padding ka kholomo ya ntolovelo

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>

Ti gutters ta horizontal & leti yimisiweke

.g-*titlilasi tinga tirhisiwa ku lawula ti horizontal gutter widths, eka xikombiso lexi landzelaka hi tirhisa ku anama ka gutter lokuntsongo, kutani kungavi na xilaveko xo engetela .overflow-hiddentlilasi ya wrapper.

Ku padding ka kholomo ya ntolovelo

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>

Tikholomu ta layini ti gutters

Titlilasi ta gutter tinga tlhela ti engeteriwa eka tikholomu ta tilayini . Eka xikombiso lexi landzelaka, hi tirhisa tikholomu ta layini leti hlamulaka na titlilasi ta gutter leti hlamulaka.

Kholomo ya layini

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>

Ku hava swidziva

Ti gutters exikarhi ka tikholomu eka titlilasi ta hina ta gridi leti hlamuseriweke ka ha ri emahlweni ti nga susiwa hi .g-0. Leswi swi susa margins ya negative eka .rowna horizontal paddingeka tikholomu hinkwato ta vana ta le kusuhi.

Xana u lava dizayini ya le tlhelo ku ya emakumu? Lahla mutswari .containerkumbe .container-fluidu engetela .mx-0eka .rowku sivela ku tala.

Hi ku tirhisa, hi leyi ndlela leyi swi langutekaka ha yona. Xiya leswaku u nga ya emahlweni u tirhisa leswi na titlilasi tin’wana hinkwato ta gridi leti hlamuseriweke ka ha ri emahlweni (ku katsa na ku anama ka tikholomu, swiyenge leswi hlamulaka, ku oda nakambe, na swin’wana).

.kolo-sm-6 .kolo-md-8

.kolo-6 .kol-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>

Cinca swidziva

Titlilasi ti akiwile kusuka eka $guttersmepe wa Sass lowu wu kumiweke ndzhaka kusuka eka $spacersmepe wa Sass.

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