Spasiëring

Bootstrap bevat 'n wye reeks snelskrif-responsiewe marge-, opvulling en gapingsnutsklasse om 'n element se voorkoms te verander.

Op hierdie bladsy

Marge en vulling

Ken responsvriendelike marginof paddingwaardes toe aan 'n element of 'n subset van sy kante met snelskrifklasse. Sluit ondersteuning vir individuele eiendomme, alle eiendomme en vertikale en horisontale eiendomme in. Klasse word gebou vanaf 'n verstek Sass-kaart wat wissel van .25remtot 3rem.

Gebruik jy die CSS Grid-uitlegmodule? Oorweeg dit om eerder die gapingshulpmiddel te gebruik .

Notasie

Spasiëringnutsprogramme wat op alle breekpunte van toepassing is, van xstot xxl, het geen breekpunt-afkorting in nie. Dit is omdat daardie klasse van min-width: 0en op toegepas word, en dus nie deur 'n medianavraag gebind word nie. Die oorblywende breekpunte bevat egter 'n breekpuntafkorting.

Die klasse word benoem deur gebruik te maak van die formaat {property}{sides}-{size}vir xsen {property}{sides}-{breakpoint}-{size}vir sm, md, lg, xl, en xxl.

Waar eiendom een van:

m- vir klasse wat stelmargin
p- vir klasse wat stelpadding

Waar sye een van is:

t- vir klasse wat stel margin-topofpadding-top
b- vir klasse wat stel margin-bottomofpadding-bottom
s- (begin) vir klasse wat stel margin-leftof padding-leftin LTR, margin-rightof padding-rightin RTL
e- (einde) vir klasse wat stel margin-rightof padding-rightin LTR, margin-leftof padding-leftin RTL
x- vir klasse wat beide *-leften stel*-right
y- vir klasse wat beide *-topen stel*-bottom
leeg - vir klasse wat 'n marginof paddingaan al 4 kante van die element stel

Waar grootte een van is:

0margin- vir klasse wat die of uitskakel paddingdeur dit op te stel0
1- (by verstek) vir klasse wat die marginof paddingstel$spacer * .25
2- (by verstek) vir klasse wat die marginof paddingstel$spacer * .5
3- (by verstek) vir klasse wat die marginof paddingstel$spacer
4- (by verstek) vir klasse wat die marginof paddingstel$spacer * 1.5
5- (by verstek) vir klasse wat die marginof paddingstel$spacer * 3
auto- vir klasse wat die marginop outomaties stel

(Jy kan meer groottes byvoeg deur inskrywings by die $spacersSass-kaartveranderlike by te voeg.)

Voorbeelde

Hier is 'n paar verteenwoordigende voorbeelde van hierdie klasse:

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

Horisontale sentrering

Boonop bevat Bootstrap ook 'n .mx-autoklas vir die horisontale sentrering van vaste-wydte blokvlak-inhoud - dit wil sê inhoud wat ' display: blockn widthstel het - deur die horisontale kantlyne op te stel auto.

Gesentreerde element

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

Negatiewe marge

In CSS kan margineiendomme negatiewe waardes gebruik ( paddingkan nie). Hierdie negatiewe marges is by verstek gedeaktiveer , maar kan in Sass geaktiveer word deur instelling $enable-negative-margins: true.

Die sintaksis is amper dieselfde as die verstek, positiewe marge-hulpmiddels, maar met die toevoeging van nvoor die gevraagde grootte. Hier is 'n voorbeeldklas wat die teenoorgestelde is van .mt-1:

.mt-n1 {
  margin-top: -0.25rem !important;
}

Gaping

Wanneer u gebruik maak display: grid, kan u gebruik maak van gapnutsprogramme op die ouerroosterhouer. Dit kan bespaar op die byvoeging van marge-hulpmiddels by individuele roosteritems (kinders van 'n display: gridhouer). Gap-nutsprogramme reageer by verstek en word gegenereer via ons nuts-API, gebaseer op die $spacersSass-kaart.

Rooster item 1

Rooster item 2

Rooster item 3

html

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

Ondersteuning sluit responsiewe opsies vir al Bootstrap se roosterafbreekpunte in, sowel as ses groottes vanaf die $spacerskaart ( 0– 5). Daar is geen .gap-autonutsklas nie, want dit is effektief dieselfde as .gap-0.

Sass

Kaarte

Spasiëringnutsprogramme word via Sass-kaart verklaar en dan gegenereer met ons hulpprogramme-API.

$spacer: 1rem;
$spacers: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
);

Utilities API

Spasiëring nutsprogramme word verklaar in ons nutsprogramme API in scss/_utilities.scss. Leer hoe om die utilities API te gebruik.

    "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
    ),
    // Gap utility
    "gap": (
      responsive: true,
      property: gap,
      class: gap,
      values: $spacers
    ),