Interspacigo

Bootstrap inkluzivas ampleksan gamon de stenografio-respondemaj marĝenoj kaj kompletigaj utilecaj klasoj por modifi la aspekton de elemento.

Kiel ĝi funkcias

Asignu respondemajn amikajn marginaŭ paddingvalorojn al elemento aŭ subaro de ĝiaj flankoj kun stenografioklasoj. Inkluzivas subtenon por individuaj propraĵoj, ĉiuj propraĵoj, kaj vertikalaj kaj horizontalaj propraĵoj. Klasoj estas konstruitaj de defaŭlta Sass-mapo intervalanta de .25remĝis 3rem.

Notacio

Interspacaj iloj kiuj validas por ĉiuj rompopunktoj, de xsĝis xl, havas neniun rompopunktomallongigon en ili. Ĉi tio estas ĉar tiuj klasoj estas aplikataj de min-width: 0kaj supren, kaj tiel ne estas ligitaj per amaskomunikila demando. La ceteraj rompopunktoj tamen inkluzivas mallongpunkton.

La klasoj estas nomitaj uzante la formaton {property}{sides}-{size}por xskaj {property}{sides}-{breakpoint}-{size}por sm, md, lg, kaj xl.

Kie posedaĵo estas unu el:

m- por klasoj kiuj starigismargin
p- por klasoj kiuj starigispadding

Kie flankoj estas unu el:

t- por klasoj kiuj starigas margin-topaŭpadding-top
b- por klasoj kiuj starigas margin-bottomaŭpadding-bottom
l- por klasoj kiuj starigas margin-leftaŭpadding-left
r- por klasoj kiuj starigas margin-rightaŭpadding-right
x- por klasoj kiuj starigas ambaŭ *-leftkaj*-right
y- por klasoj kiuj starigas ambaŭ *-topkaj*-bottom
malplena - por klasoj kiuj starigas a marginaŭ paddingsur ĉiuj 4 flankoj de la elemento

Kie grandeco estas unu el:

0- por klasoj kiuj forigas la marginaŭ paddingagordante ĝin al0
1- (defaŭlte) por klasoj kiuj fiksas la marginaŭ paddingal$spacer * .25
2- (defaŭlte) por klasoj kiuj fiksas la marginaŭ paddingal$spacer * .5
3- (defaŭlte) por klasoj kiuj fiksas la marginaŭ paddingal$spacer
4- (defaŭlte) por klasoj kiuj fiksas la marginaŭ paddingal$spacer * 1.5
5- (defaŭlte) por klasoj kiuj fiksas la marginaŭ paddingal$spacer * 3
auto- por klasoj kiuj agordas la marginal aŭtomata

(Vi povas aldoni pliajn grandecojn aldonante enskribojn al la $spacersSass-mapo-variablo.)

Ekzemploj

Jen kelkaj reprezentaj ekzemploj de ĉi tiuj klasoj:

.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;
}

Horizontala centrado

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.

Centered element

<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;
}

Jen ekzemplo de personigo de la krado Bootstrap ĉe la meza ( md) rompopunkto kaj supre. Ni pliigis la .colremburaĵon per .px-md-5kaj poste kontraŭagis tion per .mx-md-n5sur la gepatro .row.

Propra kolumna kompletigo

<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>