Phapanyetsano
Bootstrap e kenyelletsa mefuta e mengata e fapaneng ea litlelase tse arabelang ka bokhutšoane le litlelase tsa ts'ebeliso ea padding ho fetola chebahalo ea element.
Kamoo e sebetsang kateng
Abela lintho tse arabelang hantle margin
kapa padding
tsa boleng ho element kapa karoloana ea mahlakore a eona e nang le litlelase tsa shorthand. E kenyelletsa tšehetso bakeng sa thepa ea motho ka mong, thepa eohle, le thepa e otlolohileng le e tšekaletseng. Litlelase li hahiloe ho tloha ho 'mapa oa kamehla oa Sass ho tloha .25rem
ho 3rem
.
Notation
Lisebelisoa tsa sebaka tse sebetsang ho libaka tsohle tsa phomolo, ho tloha xs
ho ea ho xl
, ha li na khutsufatso ea li-breakpoint ho tsona. Lebaka ke hobane litlelase tseo li sebelisoa ho tloha min-width: 0
holimo le holimo, 'me ka hona ha li tlangoe ke potso ea media. Li-breakpoints tse setseng, leha ho le joalo, li kenyelletsa khutsufatso ea breakpoint.
Litlelase li reheletsoe ho sebelisoa sebopeho {property}{sides}-{size}
sa xs
le {property}{sides}-{breakpoint}-{size}
bakeng sa sm
, md
, lg
, le xl
.
Moo thepa e leng e 'ngoe ea:
m
- bakeng sa lihlopha tse behiloengmargin
p
- bakeng sa lihlopha tse behiloengpadding
Moo mahlakore ke e 'ngoe ea:
t
- bakeng sa litlelase tse behangmargin-top
kapapadding-top
b
- bakeng sa litlelase tse behangmargin-bottom
kapapadding-bottom
l
- bakeng sa litlelase tse behangmargin-left
kapapadding-left
r
- bakeng sa litlelase tse behangmargin-right
kapapadding-right
x
- bakeng sa lihlopha tse behang bobeli*-left
le*-right
y
- bakeng sa lihlopha tse behang bobeli*-top
le*-bottom
- blank - bakeng sa litlelase tse behang a
margin
kapapadding
mahlakoreng 'ohle a 4 a element
Moo boholo e leng e 'ngoe ea:
0
- bakeng sa litlelase tse felisangmargin
kapapadding
ka ho e beha ho0
1
- (ka kamehla) bakeng sa litlelase tse behangmargin
kapapadding
ho$spacer * .25
2
- (ka kamehla) bakeng sa litlelase tse behangmargin
kapapadding
ho$spacer * .5
3
- (ka kamehla) bakeng sa litlelase tse behangmargin
kapapadding
ho$spacer
4
- (ka kamehla) bakeng sa litlelase tse behangmargin
kapapadding
ho$spacer * 1.5
5
- (ka kamehla) bakeng sa litlelase tse behangmargin
kapapadding
ho$spacer * 3
auto
- bakeng sa litlelase tse behangmargin
ho auto
(O ka eketsa boholo bo eketsehileng ka ho kenyelletsa likenyelletso tsa $spacers
'mapa oa Sass.)
Mehlala
Mona ke mehlala ea baemeli ba lihlopha tsena:
.mt-0 {
margin-top: 0 !important;
}
.ml-1 {
margin-left: ($spacer * .25) !important;
}
.px-2 {
padding-left: ($spacer * .5) !important;
padding-right: ($spacer * .5) !important;
}
.p-3 {
padding: $spacer !important;
}
Horizontal centering
Ho ekelletsa moo, Bootstrap e boetse e kenyelletsa .mx-auto
sehlopha sa litaba tsa boemo bo sa tsitsang ba bophara bo sa fetoheng—ke hore, litaba tse nang display: block
le width
sete-ka ho beha mecheng e tšekaletseng ho auto
.
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
Negative margin
Ho CSS, margin
thepa e ka sebelisa litekanyetso tse mpe ( padding
ha li khone). Ho tloha ka 4.2, re ekelitse lits'ebeletso tse mpe tsa marang-rang bakeng sa boholo bo bong le bo bong boo e seng zero bo thathamisitsoeng ka holimo (mohlala, 1
, 2
, 3
, 4
, 5
). Lisebelisoa tsena li nepahetse bakeng sa ho etsa li-gutters tsa grid column ho pholletsa le libaka tsa phomolo.
Syntax e batla e ts'oana le lits'ebeletso tsa kamehla, tse ntle, empa ka kenyelletso ea n
pele ho boholo bo kopiloeng. Mona ke sehlopha sa mohlala se fapaneng le .mt-1
:
.mt-n1 {
margin-top: -0.25rem !important;
}
Mohlala ke ona oa ho etsa hore grid ea Bootstrap e be maemong a mahareng ( md
) le holimo. Re ekelitse .col
padding ka .px-md-5
'me ra hanyetsa seo .mx-md-n5
ka ho motsoali .row
.
<div class="row mx-md-n5">
<div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
<div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
</div>