Spacing

Bootstrap omfettet in breed oanbod fan shorthand-responsive marzje-, padding- en gap-nutsklassen om it uterlik fan in elemint te feroarjen.

Op dizze side

Marge en padding

Tawizing responsive-friendly marginof paddingwearden 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 .25remnei 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 xsoant xxl, hawwe gjin breakpoint ôfkoarting yn harren. Dit komt omdat dy klassen wurde tapast fan min-width: 0en 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 xsen {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 set margin-topofpadding-top
b- foar klassen dy't set margin-bottomofpadding-bottom
s- (begjinne) foar klassen dy't ynsteld margin-leftof padding-leftyn LTR, margin-rightof padding-rightyn RTL
e- (ein) foar klassen dy't ynsteld margin-rightof padding-rightyn LTR, margin-leftof padding-leftyn RTL
x- foar klassen dy't set sawol *-leften*-right
y- foar klassen dy't set sawol *-topen*-bottom
blank - foar klassen dy't set in marginof paddingop alle 4 kanten fan it elemint

Wêr't grutte ien fan is:

0- foar klassen dy't elimineren de marginof paddingtroch it ynstellen fan it0
1- (standert) foar klassen dy't de marginof paddingynstelle$spacer * .25
2- (standert) foar klassen dy't de marginof paddingynstelle$spacer * .5
3- (standert) foar klassen dy't de marginof paddingynstelle$spacer
4- (standert) foar klassen dy't de marginof paddingynstelle$spacer * 1.5
5- (standert) foar klassen dy't de marginof paddingynstelle$spacer * 3
auto- foar klassen dy't de marginauto ynstelle

(Jo kinne mear maten tafoegje troch yngongen ta te foegjen oan de $spacersSass-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-autoklasse foar it horizontaal centreren fan ynhâld op fêste breedte bloknivo - dat is ynhâld dy't hat display: blocken in widthset - troch de horizontale marzjes yn te stellen op auto.

Centered elemint

<div class="mx-auto" style="width: 200px;">
  Centered element
</div>

Negative marzje

Yn CSS kinne margineigenskippen negative wearden brûke ( paddingnet). 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 nfoardat 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: gridkinne jo gebrûk meitsje fan gapnutsfoarsjenningen op 'e kontener foar âldernet. Dit kin besparje op it tafoegjen fan marzje-nutsbedriuwen oan yndividuele rasteritems (bern fan in display: gridkontener). Gap-nutsbedriuwen binne standert responsyf, en wurde generearre fia ús utilities API, basearre op de $spacersSass-kaart.

Grid item 1

Grid item 2

Grid item 3

<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 $spacerskaart ( 0- 5). D'r is gjin .gap-autonutklasse, 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
    ),