Spasi
Bootstrap ngawengku rupa-rupa margin responsif shorthand jeung kelas utiliti padding pikeun ngaropéa penampilan hiji unsur urang.
Kumaha gawéna
Napelkeun responsif-friendly margin
atawa padding
nilai ka unsur atawa sawaréh sisi na kalawan kelas shorthand. Ngawengku pangrojong pikeun sipat individu, sadaya sipat, sareng sipat vertikal sareng horizontal. Kelas diwangun tina peta Sass standar mimitian ti .25rem
ka 3rem
.
Notasi
Spasi Utiliti nu lumaku pikeun sakabéh breakpoints, ti xs
ka xl
, euweuh breakpoint singketan di dinya. Ieu kusabab kelas kasebut diterapkeun ti min-width: 0
sareng ka luhur, sahingga henteu kaiket ku pamundut média. The breakpoints sésana, kumaha oge, kaasup hiji singketan breakpoint.
Kelas-kelas kasebut dingaranan ngagunakeun format {property}{sides}-{size}
for xs
jeung {property}{sides}-{breakpoint}-{size}
for sm
, md
, lg
, jeung xl
.
Dimana harta mangrupikeun salah sahiji:
m
- pikeun kelas nu diaturmargin
p
- pikeun kelas nu diaturpadding
Dimana sisi mangrupa salah sahiji:
t
- pikeun kelas nu diaturmargin-top
atawapadding-top
b
- pikeun kelas nu diaturmargin-bottom
atawapadding-bottom
l
- pikeun kelas nu diaturmargin-left
atawapadding-left
r
- pikeun kelas nu diaturmargin-right
atawapadding-right
x
- pikeun kelas nu diatur duanana*-left
jeung*-right
y
- pikeun kelas nu diatur duanana*-top
jeung*-bottom
- kosong - pikeun kelas anu nyetél
margin
atawapadding
dina sakabéh 4 sisi unsur
Dimana ukuranana mangrupikeun salah sahiji:
0
- pikeun kelas anu ngaleungitkeunmargin
atanapipadding
ku netepkeunana0
1
- (sacara standar) pikeun kelas anu nyetélmargin
atanapipadding
ka$spacer * .25
2
- (sacara standar) pikeun kelas anu nyetélmargin
atanapipadding
ka$spacer * .5
3
- (sacara standar) pikeun kelas anu nyetélmargin
atanapipadding
ka$spacer
4
- (sacara standar) pikeun kelas anu nyetélmargin
atanapipadding
ka$spacer * 1.5
5
- (sacara standar) pikeun kelas anu nyetélmargin
atanapipadding
ka$spacer * 3
auto
- pikeun kelas anu nyetélmargin
otomatis
(Anjeun tiasa nambihan langkung seueur ukuran ku nambihan éntri kana $spacers
variabel peta Sass.)
Contona
Ieu sababaraha conto perwakilan kelas ieu:
.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;
}
Puseur horisontal
Sajaba ti, Bootstrap ogé ngawengku hiji .mx-auto
kelas pikeun horisontal centering eusi tingkat blok-lebar dibereskeun-nyaéta, eusi nu boga display: block
jeung width
susunan-ku netepkeun margins horizontal ka auto
.
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
Margin négatif
Dina CSS, margin
sipat bisa ngamangpaatkeun nilai négatip ( padding
teu bisa). Dina 4.2, kami parantos nambihan utilitas margin négatip pikeun unggal ukuran integer non-enol anu didaptarkeun di luhur (contona, 1
, 2
, 3
, 4
, 5
). Utiliti ieu idéal pikeun ngaropéa talang kolom grid dina titik putus.
Sintaksisna ampir sami sareng standar, utilitas margin positif, tapi ditambah n
sateuacan ukuran anu dipénta. Ieu conto kelas anu sabalikna tina .mt-1
:
.mt-n1 {
margin-top: -0.25rem !important;
}
Ieu conto nyaluyukeun grid Bootstrap dina titik putus sedeng ( md
) sareng di luhur. Urang geus ngaronjat .col
padding kalawan .px-md-5
lajeng counteracted yén kalawan .mx-md-n5
on indungna .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>