Mellemrum
Bootstrap inkluderer en bred vifte af stenografi-responsive margin- og polstringsfunktionsklasser til at ændre et elements udseende.
Hvordan det virker
Tildel responsvenlige værdier til et element margin
eller padding
en delmængde af dets sider med stenografiklasser. Inkluderer understøttelse af individuelle egenskaber, alle egenskaber og lodrette og vandrette egenskaber. Klasser er bygget ud fra et standard Sass-kort, der spænder fra .25rem
til 3rem
.
Notation
Afstandsværktøjer, der gælder for alle brudpunkter, fra xs
til xl
, har ingen brudpunktforkortelse i sig. Dette skyldes, at disse klasser anvendes fra min-width: 0
og op, og derfor ikke er bundet af en medieforespørgsel. De resterende brudpunkter inkluderer dog en brudpunktforkortelse.
Klasserne navngives ved hjælp af formatet {property}{sides}-{size}
for xs
og {property}{sides}-{breakpoint}-{size}
for sm
, md
, lg
, og xl
.
Hvor ejendom er en af:
m
- for klasser, der sættermargin
p
- for klasser, der sætterpadding
Hvor sider er en af:
t
- for klasser, der sættermargin-top
ellerpadding-top
b
- for klasser, der sættermargin-bottom
ellerpadding-bottom
l
- for klasser, der sættermargin-left
ellerpadding-left
r
- for klasser, der sættermargin-right
ellerpadding-right
x
- for klasser, der sætter både*-left
og*-right
y
- for klasser, der sætter både*-top
og*-bottom
- blank - for klasser, der sætter en
margin
ellerpadding
på alle 4 sider af elementet
Hvor størrelsen er en af:
0
- for klasser, der eliminerermargin
ellerpadding
ved at indstille det til0
1
- (som standard) for klasser, der indstillermargin
ellerpadding
til$spacer * .25
2
- (som standard) for klasser, der indstillermargin
ellerpadding
til$spacer * .5
3
- (som standard) for klasser, der indstillermargin
ellerpadding
til$spacer
4
- (som standard) for klasser, der indstillermargin
ellerpadding
til$spacer * 1.5
5
- (som standard) for klasser, der indstillermargin
ellerpadding
til$spacer * 3
auto
- for klasser, der indstillermargin
til auto
(Du kan tilføje flere størrelser ved at tilføje poster til $spacers
Sass-kortvariablen.)
Eksempler
Her er nogle repræsentative eksempler på disse klasser:
.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;
}
Vandret centrering
Additionally, Bootstrap also includes an .mx-auto
class for horizontally centering fixed-width block level content—that is, content that has display: block
and a width
set—by setting the horizontal margins to auto
.
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
Negative margin
In CSS, margin
properties can utilize negative values (padding
cannot). As of 4.2, we’ve added negative margin utilities for every non-zero integer size listed above (e.g., 1
, 2
, 3
, 4
, 5
). These utilities are ideal for customizing grid column gutters across breakpoints.
The syntax is nearly the same as the default, positive margin utilities, but with the addition of n
before the requested size. Here’s an example class that’s the opposite of .mt-1
:
.mt-n1 {
margin-top: -0.25rem !important;
}
Her er et eksempel på tilpasning af Bootstrap-gitteret ved medium ( md
) breakpoint og derover. Vi har øget .col
polstringen med .px-md-5
og så modvirket det med .mx-md-n5
på forælderen .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>