Okugabanya ebanga

Bootstrap erimu ebika ebingi eby’okuddamu mu shorthand ne padding utility classes okukyusa endabika y’ekintu.

Engeri gye kikola

Gabira responsive-friendly marginoba paddingvalues ku element oba subset y'enjuyi zaayo ne shorthand classes. Mulimu okuwagira eby’obugagga ssekinnoomu, eby’obugagga byonna, n’eby’obugagga ebyesimbye n’eby’okwesimbye. Ebika bizimbibwa okuva ku maapu ya Sass eya bulijjo okuva ku .25remokutuuka ku 3rem.

Okuwandiika ebigambo

Ebikozesebwa mu kugabanya ebanga ebikola ku bifo byonna eby’okumenya, okuva xsku okutuuka ku xl, tebirina bufupi bwa bifo bya kumenya mu byo. Kino kiri bwe kityo kubanga kiraasi ezo zikozesebwa okuva min-width: 0n’okudda waggulu, era bwe zityo tezisibibwa ku kubuuza kwa mikutu. Ebifo ebisigaddewo, naye, bibaamu enfunyiro y’okumenya.

Ebisulo bituumibwa amannya nga tukozesa ensengeka {property}{sides}-{size}ya xs, , , ne .{property}{sides}-{breakpoint}-{size}smmdlgxl

Awali ebintu ekimu ku:

m- ku bibiina ebiteekawomargin
p- ku bibiina ebiteekawopadding

Awali enjuyi emu ku:

t- ku bibiina ebiteeka margin-topobapadding-top
b- ku bibiina ebiteeka margin-bottomobapadding-bottom
l- ku bibiina ebiteeka margin-leftobapadding-left
r- ku bibiina ebiteeka margin-rightobapadding-right
x- ku bibiina ebiteeka byombi *-leftne*-right
y- ku bibiina ebiteeka byombi *-topne*-bottom
blank - ku kiraasi eziteeka a marginoba paddingku njuyi zonna 4 eza elementi

Awali sayizi emu ku:

0- ku bibiina ebimalawo marginoba paddingnga bibiteeka ku0
1- (by default) ku kiraasi eziteeka marginoba paddingku$spacer * .25
2- (by default) ku kiraasi eziteeka marginoba paddingku$spacer * .5
3- (by default) ku kiraasi eziteeka marginoba paddingku$spacer
4- (by default) ku kiraasi eziteeka marginoba paddingku$spacer * 1.5
5- (by default) ku kiraasi eziteeka marginoba paddingku$spacer * 3
auto- ku kiraasi eziteeka ku marginku auto

(Osobola okwongerako sayizi endala ng'ossaako ebiyingizibwa ku $spacersnkyukakyuka ya maapu ya Sass.)

Eby’okulabirako

Wano waliwo ebyokulabirako ebikiikirira ebika bino:

.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;
}

Okuteeka wakati mu bbanga (horizontal centering).

Okugatta ku ekyo, Bootstrap era erimu .mx-autokiraasi ey’okussa wakati mu bbanga (horizontal centering fixed-width block level content) ebirimu —kwe kugamba, ebirimu ebirina display: blockn’ekisengekeddwa width—nga oteeka emimwa egy’okwebungulula ku auto.

Ekintu ekiri wakati

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

Negative margin

Mu CSS, margineby'obugagga bisobola okukozesa emiwendo emibi ( paddingtesobola). Okuva ku 4.2, twongeddeko ebikozesebwa eby’omugatte omubi ku buli sayizi ya namba enzijuvu etali ya ziro ewandiikiddwa waggulu (okugeza, 1, 2, 3, 4, 5). Ebikozesebwa bino birungi nnyo mu kulongoosa emidumu gy’empagi za grid okuyita mu bifo ebimenya.

Ensengeka y'ebigambo kumpi y'emu n'ebikozesebwa ebisookerwako, ebirungi margin utilities, naye nga kwogasse nnga tebannaba sayizi esabiddwa. Wano waliwo ekibiina eky'okulabirako ekikontana ne .mt-1:

.mt-n1 {
  margin-top: -0.25rem !important;
}

Wano waliwo ekyokulabirako ky'okulongoosa ekisenge kya Bootstrap ku kifo mdeky'okumenya eky'omu makkati ( ) n'okudda waggulu. Twongedde ku .colpadding ne .px-md-5ate oluvannyuma ne tuziyiza ekyo ne .mx-md-n5ku muzadde .row.

Okupakinga empagi eza custom

<div class="row mx-md-n5">
  <div class="col py-3 px-md-5 border bg-light">Custom column padding</div>
  <div class="col py-3 px-md-5 border bg-light">Custom column padding</div>
</div>