Okugabanya ebanga
Bootstrap erimu ebika ebingi eby’okuddamu mu shorthand ne padding utility classes okukyusa endabika y’ekintu.
Engeri gye kikola
Gabira responsive-friendly margin
oba padding
values 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 .25rem
okutuuka ku 3rem
.
Okuwandiika ebigambo
Ebikozesebwa mu kugabanya ebanga ebikola ku bifo byonna eby’okumenya, okuva xs
ku okutuuka ku xl
, tebirina bufupi bwa bifo bya kumenya mu byo. Kino kiri bwe kityo kubanga kiraasi ezo zikozesebwa okuva min-width: 0
n’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}
sm
md
lg
xl
Awali ebintu ekimu ku:
m
- ku bibiina ebiteekawomargin
p
- ku bibiina ebiteekawopadding
Awali enjuyi emu ku:
t
- ku bibiina ebiteekamargin-top
obapadding-top
b
- ku bibiina ebiteekamargin-bottom
obapadding-bottom
l
- ku bibiina ebiteekamargin-left
obapadding-left
r
- ku bibiina ebiteekamargin-right
obapadding-right
x
- ku bibiina ebiteeka byombi*-left
ne*-right
y
- ku bibiina ebiteeka byombi*-top
ne*-bottom
- blank - ku kiraasi eziteeka a
margin
obapadding
ku njuyi zonna 4 eza elementi
Awali sayizi emu ku:
0
- ku bibiina ebimalawomargin
obapadding
nga bibiteeka ku0
1
- (by default) ku kiraasi eziteekamargin
obapadding
ku$spacer * .25
2
- (by default) ku kiraasi eziteekamargin
obapadding
ku$spacer * .5
3
- (by default) ku kiraasi eziteekamargin
obapadding
ku$spacer
4
- (by default) ku kiraasi eziteekamargin
obapadding
ku$spacer * 1.5
5
- (by default) ku kiraasi eziteekamargin
obapadding
ku$spacer * 3
auto
- ku kiraasi eziteeka kumargin
ku auto
(Osobola okwongerako sayizi endala ng'ossaako ebiyingizibwa ku $spacers
nkyukakyuka 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-auto
kiraasi ey’okussa wakati mu bbanga (horizontal centering fixed-width block level content) ebirimu —kwe kugamba, ebirimu ebirina display: block
n’ekisengekeddwa width
—nga oteeka emimwa egy’okwebungulula ku auto
.
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
Negative margin
Mu CSS, margin
eby'obugagga bisobola okukozesa emiwendo emibi ( padding
tesobola). 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 n
nga 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 md
eky'okumenya eky'omu makkati ( ) n'okudda waggulu. Twongedde ku .col
padding ne .px-md-5
ate oluvannyuma ne tuziyiza ekyo ne .mx-md-n5
ku muzadde .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>