Ntam a ɛwɔ ntam
Bootstrap no ka shorthand responsive margin ne padding utility class ahorow pii ho de sesa element bi hwɛbea.
Sɛnea ɛyɛ adwuma
Fa mmuae-adamfofa margin
anaa padding
gyinapɛn ahorow ma element bi anaa n’afã horow no fã ketewaa bi a ɛwɔ nkyerɛwde tiawa adesua ahorow. Nea ɛka ho ne mmoa ma ankorankoro agyapade, agyapade nyinaa, ne vertical ne horizontal agyapade. Wɔkyekye adesua ahorow no fi Sass map a wɔahyɛ da ayɛ a efi .25rem
kosi 3rem
.
Nkyerɛwde a wɔde kyerɛw nsɛm
Spacing utilities a ɛfa breakpoints nyinaa ho, efi xs
to xl
, nni breakpoint abbreviation biara wɔ mu. Eyi te saa efisɛ wɔde saa adesua ahorow no di dwuma fi min-width: 0
ne soro, na ɛnam saa kwan yi so no, wɔmfa nsɛm ho amanneɛbɔfo asɛmmisa nkyekyere wɔn. Nanso, breakpoints a aka no, breakpoint a wɔatwa no tiawa ka ho.
Wɔde ɔkwan a wɔfa so {property}{sides}-{size}
yɛ xs
ne {property}{sides}-{breakpoint}-{size}
nea wɔde yɛ sm
, md
, lg
, ne xl
.
Baabi a agyapade yɛ biako a:
m
- ma adesua ahoroo a eto somargin
p
- ma adesua ahoroo a eto sopadding
Faako a afã horow yɛ biako a:
t
- ma adesua a wode simargin-top
anaapadding-top
b
- ma adesua a wode simargin-bottom
anaapadding-bottom
l
- ma adesua a wode simargin-left
anaapadding-left
r
- ma adesua a wode simargin-right
anaapadding-right
x
- ma adesua ahorow a wode abien no nyinaa si*-left
ne*-right
y
- ma adesua ahorow a wode abien no nyinaa si*-top
ne*-bottom
- blank - ma adesua a wode a
margin
anaasepadding
wo element no afã 4 nyinaa so
Baabi a kɛseyɛ yɛ biako wɔ:
0
- ma adesua ahoroo a eyimargin
anaasepadding
enam se wode besi so0
1
- (defato) ma adesua a wodemargin
anaasepadding
to$spacer * .25
2
- (defato) ma adesua a wodemargin
anaasepadding
to$spacer * .5
3
- (defato) ma adesua a wodemargin
anaasepadding
to$spacer
4
- (defato) ma adesua a wodemargin
anaasepadding
to$spacer * 1.5
5
- (defato) ma adesua a wodemargin
anaasepadding
to$spacer * 3
auto
- ma adesua a wodemargin
to auto
(Wobɛtumi de akɛseɛ foforɔ aka ho denam nsɛm a wode bɛka $spacers
Sass map variable no ho no so.)
Nhwɛso ahorow
Saa adesua ahorow yi ho nhwɛso ahorow bi a egyina hɔ ma ni:
.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 a wɔde hyɛ mfinimfini
Bio nso, Bootstrap nso de .mx-auto
adesuakuw bi a wɔde hyɛ mfinimfini a ɛkɔ soro a ɛwɔ fixed-width block level content —kyerɛ sɛ, nsɛm a ɛwɔ display: block
ne width
set bi —denam horizontal margins a wɔde besi auto
.
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
Negative margin a ɛyɛ hu
Wɔ CSS mu no, margin
agyapade betumi de botae ahorow a enye adi dwuma ( padding
ntumi). Ɛde besi 4.2 no, yɛde negative margin utilities aka ho ama integer kɛse biara a ɛnyɛ zero a wɔakyerɛw wɔ atifi hɔ (sɛ nhwɛso no, 1
, 2
, 3
, 4
, 5
). Saa utilities yi yɛ papa ma customizing grid column gutters wɔ breakpoints nyinaa.
Ɛkame ayɛ sɛ syntax no ne default, positive margin utilities no yɛ pɛ, nanso wɔde aka ho n
ansa na wɔabisa no kɛse. Nhwɛso adesuakuw bi a ɛne .mt-1
:
.mt-n1 {
margin-top: -0.25rem !important;
}
Nhwɛsoɔ a ɛfa sɛnea wobɛsesa Bootstrap grid no wɔ medium ( md
) breakpoint ne nea ɛboro saa no ni. Yɛama .col
padding no akɔ soro ne .px-md-5
na afei yɛakasa atia saa no ne .mx-md-n5
wɔ ɔwofo no .row
so .
<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>