Mitsinje
Gutters ndi padding pakati pa zipilala zanu, zomwe zimagwiritsidwa ntchito poyang'anira malo ndikugwirizanitsa zomwe zili mu Bootstrap grid system.
Momwe amagwirira ntchito
-
Mitsinje ndi mipata pakati pa zomwe zili pamndandanda, zopangidwa ndi zopingasa
padding
. Timayikapadding-right
ndipadding-left
pagawo lililonse, ndikugwiritsa ntchito negativemargin
kuti tithetsere kumayambiriro ndi kumapeto kwa mzere uliwonse kuti tigwirizane ndi zomwe zili. -
Mitsinje imayambira pa
1.5rem
(24px
) m'lifupi. Izi zimatithandiza kufananiza gridi yathu ndi ma padding ndi ma margin spacers . -
Gutters akhoza kusinthidwa moyenera. Gwiritsani ntchito makalasi ophatikizika a breakpoint kuti musinthe ma gutter opingasa, mitsuko yoyima, ndi ngalande zonse.
Miyendo yopingasa
.gx-*
makalasi angagwiritsidwe ntchito kulamulira yopingasa ngalande widths. Kholo .container
kapena .container-fluid
kholo lingafunike kusinthidwa ngati ma gutters akuluakulu agwiritsidwanso ntchito kuti apewe kusefukira kosafunikira, pogwiritsa ntchito zofananira. Mwachitsanzo, mu chitsanzo chotsatirachi tawonjezera padding ndi .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>
Njira ina ndiyo kuwonjezera wrapper kuzungulira .row
ndi .overflow-hidden
kalasi:
<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>
Miyendo yoyima
.gy-*
makalasi angagwiritsidwe ntchito kulamulira ofukula ngalande widths. Monga ngalande zopingasa, ngalande zoyima zingayambitse kusefukira pansi .row
kumapeto kwa tsamba. Izi zikachitika, onjezerani chovala chozungulira .row
ndi .overflow-hidden
kalasi:
<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>
Zopingasa ndi zoyima
.g-*
makalasi atha kugwiritsidwa ntchito kuwongolera makulidwe opingasa, mwachitsanzo, timagwiritsa ntchito kachulukidwe kakang'ono ka ngalande, kotero sipadzafunika kuwonjezera gulu la .overflow-hidden
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>
Mizere mizere ngalande
Maphunziro a gutter amathanso kuwonjezeredwa ku mizere ya mizere . M'chitsanzo chotsatirachi, timagwiritsa ntchito mizere yoyankha ndi makalasi omvera.
<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>
Palibe ngalande
Miyendo pakati pa mizati m'magulu athu omwe tafotokozeratu amatha kuchotsedwa ndi .g-0
. Izi zimachotsa zoipa margin
s kuchokera .row
ndi yopingasa padding
kuchokera mzati zonse za ana.
Mukufuna mapangidwe am'mphepete mpaka m'mphepete? Kugwetsa kholo .container
kapena .container-fluid
.
Mwakuchita, umu ndi momwe zimawonekera. Zindikirani kuti mutha kupitiliza kugwiritsa ntchito izi ndi makalasi ena onse omwe adafotokozedweratu (kuphatikiza makulidwe amzere, magawo omvera, kuyitanitsa, ndi zina zambiri).
<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>
Kusintha madzi
Maphunziro amapangidwa kuchokera pamapu a $gutters
Sass omwe $spacers
amatengera mapu a Sass.
$grid-gutter-width: 1.5rem;
$gutters: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
);