Razmak

Bootstrap uključuje širok raspon stenografskih odgovarajućih klasa korisnih margina, paddinga i praznina za izmjenu izgleda elementa.

Na ovoj stranici

Margine i ispuna

Dodijelite prilagođene vrijednosti marginili paddingvrijednosti elementu ili podskupu njegovih strana pomoću skraćenih klasa. Uključuje podršku za pojedinačna svojstva, sva svojstva te okomita i vodoravna svojstva. Klase su izgrađene od zadane Sass mape u rasponu od .25remdo 3rem.

Koristite li modul CSS Grid layout? Razmislite o korištenju uslužnog programa za praznine .

Notacija

Pomoćni programi za razmake koji se primjenjuju na sve prijelomne točke, od xsdo xxl, u sebi nemaju kraticu prijelomne točke. To je zato što se te klase primjenjuju od min-width: 0i prema gore i stoga nisu vezane medijskim upitom. Međutim, preostale prijelomne točke uključuju kraticu prijelomne točke.

Klase su imenovane u formatu {property}{sides}-{size}za xsi {property}{sides}-{breakpoint}-{size}za sm, md, lg, xli xxl.

Kada je vlasništvo jedno od:

m- za klase koje skupmargin
p- za klase koje skuppadding

Gdje su strane jedno od:

t- za razrede koji postavljaju margin-topodnpadding-top
b- za razrede koji postavljaju margin-bottomodnpadding-bottom
s- (početak) za klase koje postavljaju margin-leftili padding-leftu LTR, margin-rightili padding-rightu RTL
e- (kraj) za klase koje postavljaju margin-rightili padding-rightu LTR, margin-leftili padding-leftu RTL
x- za klase koje postavljaju i *-lefti*-right
y- za klase koje postavljaju i *-topi*-bottom
prazno - za klase koje postavljaju a marginili paddingna sve 4 strane elementa

Gdje je veličina jedno od sljedećeg:

0- za klase koje eliminiraju marginili paddingpostavljanjem na0
1- (prema zadanim postavkama) za klase koje postavljaju marginili paddingna$spacer * .25
2- (prema zadanim postavkama) za klase koje postavljaju marginili paddingna$spacer * .5
3- (prema zadanim postavkama) za klase koje postavljaju marginili paddingna$spacer
4- (prema zadanim postavkama) za klase koje postavljaju marginili paddingna$spacer * 1.5
5- (prema zadanim postavkama) za klase koje postavljaju marginili paddingna$spacer * 3
auto- za klase koje postavljaju marginna auto

(Možete dodati više veličina dodavanjem unosa u $spacersvarijablu karte Sass.)

Primjeri

Evo nekoliko reprezentativnih primjera ovih klasa:

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

Horizontalno centriranje

Osim toga, Bootstrap također uključuje .mx-autoklasu za vodoravno centriranje sadržaja na razini bloka fiksne širine—to jest, sadržaja koji ima display: blocki widthskup—postavljanjem vodoravnih margina na auto.

Centrirani element

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

Negativna margina

U CSS-u marginsvojstva mogu koristiti negativne vrijednosti ( paddingne mogu). Te su negativne margine onemogućene prema zadanim postavkama , ali se mogu omogućiti u Sassu postavkom $enable-negative-margins: true.

Sintaksa je gotovo ista kao kod zadanih uslužnih programa pozitivne margine, ali s dodatkom nprije tražene veličine. Evo primjera klase koja je suprotna od .mt-1:

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

Gap

Kada koristite display: grid, možete koristiti gappomoćne programe na nadređenom mrežnom spremniku. Ovo može uštedjeti na dodavanju pomoćnih programa za margine pojedinačnim stavkama mreže (djeca display: gridspremnika). Gap uslužni programi reagiraju prema zadanim postavkama i generiraju se putem našeg API-ja uslužnih programa, temeljenog na $spacersSass mapi.

Stavka mreže 1

Stavka mreže 2

Stavka mreže 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>

Podrška uključuje responzivne opcije za sve prijelomne točke Bootstrapove mreže, kao i šest veličina s $spacerskarte ( 0– 5). Ne postoji .gap-autoklasa korisnosti jer je zapravo ista kao .gap-0.

Sass

Karte

Pomoćni programi za razmake deklariraju se putem Sass mape i zatim generiraju s našim API-jem za pomoćne programe.

$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);

API za pomoćne programe

Pomoćni programi razmaka deklarirani su u našem API-ju pomoćnih programa u scss/_utilities.scss. Naučite kako koristiti API uslužnih programa.

    "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
    ),