Ntam a ɛwɔ ntam
Bootstrap no ka shorthand mmuae margin, padding, ne gap utility class ahorow pii ho de sesa element bi hwɛbea.
Margin ne padding a wɔde hyɛ mu
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
.
Sɛ wode CSS Grid nhyehyɛe module no redi dwuma? Susuw ho sɛ wode gap utility no bedi dwuma .
Nkyerɛwde a wɔde kyerɛw nsɛm
Spacing utilities a ɛfa breakpoints nyinaa ho, efi xs
to xxl
, 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 media 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
, xl
, ne xxl
.
Baabi a agyapade yɛ biako a:
m
- ma adesua ahoroo a eto somargin
p
- ma adesua ahoroo a eto sopadding
Baabi a afã horow no yɛ biako:
t
- ma adesua a wode simargin-top
anaapadding-top
b
- ma adesua a wode simargin-bottom
anaapadding-bottom
s
- (fi ase) ma adesua a wode simargin-left
anaasepadding-left
wo LTR mu,margin-right
anaasepadding-right
wo RTL mue
- (awiee) ma adesua a wode simargin-right
anaasepadding-right
wo LTR mu,margin-left
anaasepadding-left
wo RTL mux
- 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;
}
.ms-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
Wɔ CSS mu no, margin
agyapade betumi de botae ahorow a enye adi dwuma ( padding
ntumi). Saa negative margins yi yɛ nea wɔagyae no default so , nanso wobetumi ama ayɛ adwuma wɔ Sass mu denam nhyehyɛe so $enable-negative-margins: true
.
Ɛ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;
}
Kwan
Sɛ wode redi dwuma display: grid
a, wubetumi de gap
utilities adi dwuma wɔ ɔwofo grid container no so. Eyi betumi akora sika so wɔ hia a ɛsɛ sɛ wode margin utilities ka grid nneɛma ankorankoro ho (mmofra a wɔwɔ display: grid
container bi mu). Gap utilities no yɛ mmuaeɛ default so, na ɛnam yɛn utilities API so na ɛyɛ, a egyina $spacers
Sass map no so.
<div class="d-grid gap-3">
<div class="p-2 bg-light border">Grid item 1</div>
<div class="p-2 bg-light border">Grid item 2</div>
<div class="p-2 bg-light border">Grid item 3</div>
</div>
Mmoa no ka ho ne mmuaeɛ akwan a wɔfa so paw Bootstrap grid breakpoints nyinaa, ne akɛseɛ asia a ɛfiri $spacers
map no mu ( 0
– 5
). utility class biara nni hɔ .gap-auto
sɛnea ɛyɛ ade koro no ara wɔ ɔkwan a etu mpɔn so ne .gap-0
.
Sass
Asase mfonini ahorow
Wɔnam Sass map so na ɛbɔ Spacing utilities ho dawuru na afei wɔde yɛn utilities API no yɛ.
$spacer: 1rem;
$spacers: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
);
$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null);
Nneɛma a wɔde di dwuma API
Wɔabɔ Spacing utilities ho dawuru wɔ yɛn utilities API mu wɔ scss/_utilities.scss
. Sua sɛnea wode utilities API no bedi dwuma.
"margin": (
responsive: true,
property: margin,
class: m,
values: map-merge($spacers, (auto: auto))
),
"margin-x": (
responsive: true,
property: margin-right margin-left,
class: mx,
values: map-merge($spacers, (auto: auto))
),
"margin-y": (
responsive: true,
property: margin-top margin-bottom,
class: my,
values: map-merge($spacers, (auto: auto))
),
"margin-top": (
responsive: true,
property: margin-top,
class: mt,
values: map-merge($spacers, (auto: auto))
),
"margin-end": (
responsive: true,
property: margin-right,
class: me,
values: map-merge($spacers, (auto: auto))
),
"margin-bottom": (
responsive: true,
property: margin-bottom,
class: mb,
values: map-merge($spacers, (auto: auto))
),
"margin-start": (
responsive: true,
property: margin-left,
class: ms,
values: map-merge($spacers, (auto: auto))
),
// Negative margin utilities
"negative-margin": (
responsive: true,
property: margin,
class: m,
values: $negative-spacers
),
"negative-margin-x": (
responsive: true,
property: margin-right margin-left,
class: mx,
values: $negative-spacers
),
"negative-margin-y": (
responsive: true,
property: margin-top margin-bottom,
class: my,
values: $negative-spacers
),
"negative-margin-top": (
responsive: true,
property: margin-top,
class: mt,
values: $negative-spacers
),
"negative-margin-end": (
responsive: true,
property: margin-right,
class: me,
values: $negative-spacers
),
"negative-margin-bottom": (
responsive: true,
property: margin-bottom,
class: mb,
values: $negative-spacers
),
"negative-margin-start": (
responsive: true,
property: margin-left,
class: ms,
values: $negative-spacers
),
// Padding utilities
"padding": (
responsive: true,
property: padding,
class: p,
values: $spacers
),
"padding-x": (
responsive: true,
property: padding-right padding-left,
class: px,
values: $spacers
),
"padding-y": (
responsive: true,
property: padding-top padding-bottom,
class: py,
values: $spacers
),
"padding-top": (
responsive: true,
property: padding-top,
class: pt,
values: $spacers
),
"padding-end": (
responsive: true,
property: padding-right,
class: pe,
values: $spacers
),
"padding-bottom": (
responsive: true,
property: padding-bottom,
class: pb,
values: $spacers
),
"padding-start": (
responsive: true,
property: padding-left,
class: ps,
values: $spacers
),