Spacing
Kasama sa Bootstrap ang isang malawak na hanay ng mga shorthand responsive margin at mga klase ng utility ng padding upang baguhin ang hitsura ng isang elemento.
Paano ito gumagana
Magtalaga ng tumutugon-friendly margin
o padding
mga halaga sa isang elemento o isang subset ng mga panig nito na may mga klase ng shorthand. May kasamang suporta para sa mga indibidwal na property, lahat ng property, at vertical at horizontal property. Binuo ang mga klase mula sa isang default na mapa ng Sass mula .25rem
hanggang 3rem
.
Notasyon
Ang mga spacing utilities na nalalapat sa lahat ng breakpoint, mula xs
hanggang xl
, ay walang pagdadaglat ng breakpoint sa mga ito. Ito ay dahil ang mga klase na iyon ay inilapat mula min-width: 0
at pataas, at sa gayon ay hindi nakatali sa isang query sa media. Ang natitirang mga breakpoint, gayunpaman, ay may kasamang breakpoint abbreviation.
Ang mga klase ay pinangalanan gamit ang format {property}{sides}-{size}
para sa xs
at {property}{sides}-{breakpoint}-{size}
para sa sm
, md
, lg
, at xl
.
Kung saan ang ari- arian ay isa sa:
m
- para sa mga klase na itinakdamargin
p
- para sa mga klase na itinakdapadding
Kung saan ang mga gilid ay isa sa:
t
- para sa mga klase na nagtatakdamargin-top
opadding-top
b
- para sa mga klase na nagtatakdamargin-bottom
opadding-bottom
l
- para sa mga klase na nagtatakdamargin-left
opadding-left
r
- para sa mga klase na nagtatakdamargin-right
opadding-right
x
- para sa mga klase na nagtatakda ng pareho*-left
at*-right
y
- para sa mga klase na nagtatakda ng pareho*-top
at*-bottom
- blangko - para sa mga klase na nagtatakda ng
margin
opadding
sa lahat ng 4 na panig ng elemento
Kung saan ang laki ay isa sa:
0
- para sa mga klase na nag-aalis ngmargin
opadding
sa pamamagitan ng pagtatakda nito sa0
1
- (bilang default) para sa mga klase na nagtatakda ngmargin
opadding
sa$spacer * .25
2
- (bilang default) para sa mga klase na nagtatakda ngmargin
opadding
sa$spacer * .5
3
- (bilang default) para sa mga klase na nagtatakda ngmargin
opadding
sa$spacer
4
- (bilang default) para sa mga klase na nagtatakda ngmargin
opadding
sa$spacer * 1.5
5
- (bilang default) para sa mga klase na nagtatakda ngmargin
opadding
sa$spacer * 3
auto
- para sa mga klase na itinakda angmargin
sa auto
(Maaari kang magdagdag ng higit pang laki sa pamamagitan ng pagdaragdag ng mga entry sa $spacers
variable ng Sass map.)
Mga halimbawa
Narito ang ilang kinatawan ng mga halimbawa ng mga klase na ito:
Pahalang na pagsentro
Bilang karagdagan, ang Bootstrap ay nagsasama rin ng isang .mx-auto
klase para sa pahalang na pagsentro ng nakapirming lapad na antas ng block na nilalaman—iyon ay, nilalamang mayroon display: block
at isang width
set—sa pamamagitan ng pagtatakda ng mga pahalang na margin sa auto
.
Negatibong margin
Sa CSS, margin
ang mga katangian ay maaaring gumamit ng mga negatibong halaga ( padding
hindi maaaring). Mula noong 4.2, nagdagdag kami ng mga negatibong margin utility para sa bawat non-zero integer na laki na nakalista sa itaas (hal, 1
, 2
, 3
, 4
, 5
). Ang mga utility na ito ay mainam para sa pag-customize ng grid column gutters sa mga breakpoint.
Ang syntax ay halos kapareho ng default, positibong margin utility, ngunit may pagdaragdag ng n
bago ang hiniling na laki. Narito ang isang halimbawang klase na kabaligtaran ng .mt-1
:
Narito ang isang halimbawa ng pag-customize ng Bootstrap grid sa medium ( md
) breakpoint at sa itaas. Dinagdagan namin ang .col
padding .px-md-5
at pagkatapos ay kinontra iyon sa .mx-md-n5
magulang .row
.