Spacing
Bootstrap omfettet in breed oanbod fan shorthand-responsive marzje-, padding- en gap-nutsklassen om it uterlik fan in elemint te feroarjen.
Marge en padding
Tawizing responsive-friendly margin
of padding
wearden oan in elemint of in subset fan syn kanten mei shorthand klassen. Omfettet stipe foar yndividuele eigenskippen, alle eigenskippen, en fertikale en horizontale eigenskippen. Klassen wurde boud út in standert Sass kaart fariearjend fan .25rem
nei 3rem
.
Mei help fan de CSS Grid layout module? Beskôgje it gebrûk fan it gap-hulpprogramma .
Notaasje
Spacing utilities dy't jilde foar alle breakpoints, fan xs
oant xxl
, hawwe gjin breakpoint ôfkoarting yn harren. Dit komt omdat dy klassen wurde tapast fan min-width: 0
en omheech, en dus binne net bûn troch in media query. De oerbleaune brekpunten befetsje lykwols in brekpuntôfkoarting.
De klassen wurde neamd mei it formaat {property}{sides}-{size}
foar xs
en {property}{sides}-{breakpoint}-{size}
foar sm
, md
, lg
, xl
, en xxl
.
Wêr't eigendom ien fan is:
m
- foar klassen dy't setmargin
p
- foar klassen dy't setpadding
Wêr't kanten ien fan is:
t
- foar klassen dy't setmargin-top
ofpadding-top
b
- foar klassen dy't setmargin-bottom
ofpadding-bottom
s
- (begjinne) foar klassen dy't ynsteldmargin-left
ofpadding-left
yn LTR,margin-right
ofpadding-right
yn RTLe
- (ein) foar klassen dy't ynsteldmargin-right
ofpadding-right
yn LTR,margin-left
ofpadding-left
yn RTLx
- foar klassen dy't set sawol*-left
en*-right
y
- foar klassen dy't set sawol*-top
en*-bottom
- blank - foar klassen dy't set in
margin
ofpadding
op alle 4 kanten fan it elemint
Wêr't grutte ien fan is:
0
- foar klassen dy't elimineren demargin
ofpadding
troch it ynstellen fan it0
1
- (standert) foar klassen dy't demargin
ofpadding
ynstelle$spacer * .25
2
- (standert) foar klassen dy't demargin
ofpadding
ynstelle$spacer * .5
3
- (standert) foar klassen dy't demargin
ofpadding
ynstelle$spacer
4
- (standert) foar klassen dy't demargin
ofpadding
ynstelle$spacer * 1.5
5
- (standert) foar klassen dy't demargin
ofpadding
ynstelle$spacer * 3
auto
- foar klassen dy't demargin
auto ynstelle
(Jo kinne mear maten tafoegje troch yngongen ta te foegjen oan de $spacers
Sass-kaartfariabele.)
Foarbylden
Hjir binne wat represintative foarbylden fan dizze klassen:
.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;
}
Horizontale sintraal
Derneist omfettet Bootstrap ek in .mx-auto
klasse foar it horizontaal centreren fan ynhâld op fêste breedte bloknivo - dat is ynhâld dy't hat display: block
en in width
set - troch de horizontale marzjes yn te stellen op auto
.
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
Negative marzje
Yn CSS kinne margin
eigenskippen negative wearden brûke ( padding
net). Dizze negative marzjes binne standert útskeakele , mar kinne yn Sass ynskeakele wurde troch ynstelling $enable-negative-margins: true
.
De syntaksis is hast itselde as de standert, positive marzje-nutsbedriuwen, mar mei de tafoeging fan n
foardat de frege grutte. Hjir is in foarbyldklasse dy't it tsjinoerstelde is fan .mt-1
:
.mt-n1 {
margin-top: -0.25rem !important;
}
Gat
By it brûken display: grid
kinne jo gebrûk meitsje fan gap
nutsfoarsjenningen op 'e kontener foar âldernet. Dit kin besparje op it tafoegjen fan marzje-nutsbedriuwen oan yndividuele rasteritems (bern fan in display: grid
kontener). Gap-nutsbedriuwen binne standert responsyf, en wurde generearre fia ús utilities API, basearre op de $spacers
Sass-kaart.
<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>
Stipe omfettet responsive opsjes foar alle Bootstrap's grid breakpoints, lykas seis maten fan 'e $spacers
kaart ( 0
- 5
). D'r is gjin .gap-auto
nutklasse, om't it effektyf itselde is as .gap-0
.
Sass
Maps
Spacing utilities wurde ferklearre fia Sass-kaart en dan generearre mei ús utilities API.
$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);
Utilities API
Spacing utilities wurde ferklearre yn ús utilities API yn scss/_utilities.scss
. Learje hoe't jo de utilities API brûke.
"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
),