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.
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 vekapadding-right
napadding-left
le ka kholomo yin’wana na yin’wana, naswona hi tirhisa negativemargin
ku 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 .container
kumbe .container-fluid
mutswari 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
:
<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>
Ntlhantlho wun’wana i ku engetela xifunengeto ku rhendzela the .row
na .overflow-hidden
tlilasi:
<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>
Ti- gutter leti yimisiweke
.gy-*
titlilasi tinga tirhisiwa ku lawula ti vertical gutter widths. Kufana na ti horizontal gutters, ti vertical gutters tinga endla leswaku kuva na ku tala nyana ehansi ka .row
emakumu ka tluka. Loko leswi swi humelela, u engetela xifunengeto ku rhendzeleka .row
na .overflow-hidden
tlilasi:
<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>
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-hidden
tlilasi ya wrapper.
<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>
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.
<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>
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 margin
s ya negative eka .row
na horizontal padding
eka tikholomu hinkwato ta vana ta le kusuhi.
Xana u lava dizayini ya le tlhelo ku ya emakumu? Lahla mutswari .container
kumbe .container-fluid
.
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).
<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>
Cinca swidziva
Titlilasi ti akiwile kusuka eka $gutters
mepe wa Sass lowu wu kumiweke ndzhaka kusuka eka $spacers
mepe 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,
);