Lithako
Li-Gutters ke sebaka se pakeng tsa litšiea tsa hau, tse sebelisetsoang ho beha sebaka ka tsela e arabelang le ho hokahanya litaba tsa tsamaiso ea Bootstrap.
Kamoo li sebetsang kateng
-
Li-gutters ke likheo pakeng tsa litaba tsa kholomo, tse entsoeng ke tse rapameng
padding
. Re behapadding-right
lepadding-left
kholumong ka 'ngoe, 'me re sebelisa negativemargin
ho fokotsa seo qalong le qetellong ea mola o mong le o mong ho hokahanya litaba. -
Li-gutter li qala ho
1.5rem
(24px
) bophara. Sena se re lumella ho bapisa gridi ea rona le sekala sa padding le margin spacers . -
Li-gutters li ka fetoloa ka mokhoa o nepahetseng. Sebelisa litlelase tse ikhethileng tsa li-gutter ho fetola li-gutter tse tšekaletseng, li-gutter tse otlolohileng, le li-gutter kaofela.
Li-gutter tse tšekaletseng
.gx-*
lihlopha li ka sebelisoa ho laola bophara ba li-gutter tse rapameng. Ho ka 'na ha hlokahala hore motsoali .container
kapa .container-fluid
motsoali a lokisoe haeba li-gutters tse khōloanyane le tsona li sebelisoa ho qoba ho phalla ho sa batleheng, ho sebelisa lisebelisoa tse tšoanang. Mohlala, mohlaleng o latelang re ekelitse padding ka .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>
Tharollo e 'ngoe ke ho kenyelletsa wrapper ho potoloha .row
le .overflow-hidden
sehlopha:
<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>
Li-gutter tse otlolohileng
.gy-*
lihlopha li ka sebelisoa ho laola bophara ba li-gutter tse otlolohileng. Joalo ka li-gutter tse tšekaletseng, li-gutters tse emeng li ka baka ho tlala ka tlase .row
ho qetellong ea leqephe. Haeba sena se etsahala, o eketsa sekoahelo ho pota-pota .row
le .overflow-hidden
sehlopha:
<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>
Li-gutter tse tšekaletseng le tse theohileng
.g-*
litlelase li ka sebelisoa ho laola bophara ba li-gutter tse tšekaletseng, mohlala o latelang re sebelisa bophara bo bonyenyane ba li-gutter, kahoo ho ke ke ha hlokahala ho eketsa sehlopha sa .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>
Mela ea litšiea li-gutters
Litlelase tsa Gutter le tsona li ka eketsoa likholomong tsa mela . Mohlaleng o latelang, re sebelisa litšiea tsa mela e arabelang le lihlopha tse arabelang tsa li-gutter.
<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>
Ha ho li-gutters
Li-gutters tse pakeng tsa litšiea lihlopheng tsa rona tse hlalositsoeng esale pele li ka tlosoa ka .g-0
. Sena se tlosa negative margin
s ho tloha .row
le tse rapameng padding
ho tloha likholomong tsohle tse haufi tsa bana.
Na u hloka moralo o mong le o mong? Lahla motsoali .container
kapa .container-fluid
.
Ka ts'ebetso, mona ke kamoo e shebahalang kateng. Hlokomela hore o ka tsoela pele ho sebelisa sena ka litlelase tse ling tsohle tse boletsoeng esale pele (ho kenyeletsoa bophara ba kholomo, likarolo tse arabelang, li-odara, le tse ling).
<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>
Fetola li-gutters
Litlelase li hahiloe ho tsoa $gutters
'mapeng oa Sass o futsitsoeng ho tsoa ho $spacers
' mapa oa Sass.
$grid-gutter-width: 1.5rem;
$gutters: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
);