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 marginkapa paddingtsa 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 .25remho 3rem.

Notation

Lisebelisoa tsa sebaka tse sebetsang ho libaka tsohle tsa phomolo, ho tloha xsho ea ho xl, ha li na khutsufatso ea li-breakpoint ho tsona. Lebaka ke hobane litlelase tseo li sebelisoa ho tloha min-width: 0holimo 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 xsle {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 behang margin-topkapapadding-top
b- bakeng sa litlelase tse behang margin-bottomkapapadding-bottom
l- bakeng sa litlelase tse behang margin-leftkapapadding-left
r- bakeng sa litlelase tse behang margin-rightkapapadding-right
x- bakeng sa lihlopha tse behang bobeli *-leftle*-right
y- bakeng sa lihlopha tse behang bobeli *-tople*-bottom
blank - bakeng sa litlelase tse behang a marginkapa paddingmahlakoreng 'ohle a 4 a element

Moo boholo e leng e 'ngoe ea:

0- bakeng sa litlelase tse felisang marginkapa paddingka ho e beha ho0
1- (ka kamehla) bakeng sa litlelase tse behang marginkapa paddingho$spacer * .25
2- (ka kamehla) bakeng sa litlelase tse behang marginkapa paddingho$spacer * .5
3- (ka kamehla) bakeng sa litlelase tse behang marginkapa paddingho$spacer
4- (ka kamehla) bakeng sa litlelase tse behang marginkapa paddingho$spacer * 1.5
5- (ka kamehla) bakeng sa litlelase tse behang marginkapa paddingho$spacer * 3
auto- bakeng sa litlelase tse behang marginho 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-autosehlopha sa litaba tsa boemo bo sa tsitsang ba bophara bo sa fetoheng—ke hore, litaba tse nang display: blockle widthsete-ka ho beha mecheng e tšekaletseng ho auto.

Karolo e bohareng

<div class="mx-auto" style="width: 200px;">
  Centered element
</div>

Negative margin

Ho CSS, marginthepa e ka sebelisa litekanyetso tse mpe ( paddingha 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 npele 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 .colpadding ka .px-md-5'me ra hanyetsa seo .mx-md-n5ka ho motsoali .row.

Melaetsa e tloahelehileng

<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>