Razmak

Bootstrap uključuje širok raspon uslužnih klasa margina, paddinga i praznina koje reaguju na stenografiju za promjenu izgleda elementa.

Na ovoj stranici

Margina i padding

Dodijelite prilagođene marginili paddingvrijednosti elementu ili podskupu njegovih strana sa skraćenim klasama. Uključuje podršku za pojedinačna svojstva, sva svojstva i vertikalna i horizontalna svojstva. Klase su izgrađene od zadane Sass mape u rasponu od .25remdo 3rem.

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

Notacija

Uslužni programi za razmak koji se primjenjuju na sve tačke prekida, od xsdo xxl, nemaju skraćenicu za tačku prekida. To je zato što se te klase primjenjuju od min-width: 0i naviše i stoga nisu vezane medijskim upitom. Preostale tačke prekida, međutim, uključuju skraćenicu tačke prekida.

Klase su imenovane koristeći format {property}{sides}-{size}za xsi {property}{sides}-{breakpoint}-{size}za sm, md, lg, xli xxl.

Gdje je imovina jedno od:

m- za nastavu koja je postavljenamargin
p- za nastavu koja je postavljenapadding

Gdje je strana jedna od:

t- za nastavu koja postavlja margin-topilipadding-top
b- za nastavu koja postavlja margin-bottomilipadding-bottom
s- (početak) za klase koje se 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 oba *-lefti*-right
y- za klase koje postavljaju oba *-topi*-bottom
prazno - za klase koje postavljaju a marginili paddingna sve 4 strane elementa

Gdje je veličina jedna od:

0- za klase koje eliminišu marginili paddingpostavljanjem na0
1- (podrazumevano) za klase koje postavljaju marginili paddingna$spacer * .25
2- (podrazumevano) za klase koje postavljaju marginili paddingna$spacer * .5
3- (podrazumevano) za klase koje postavljaju marginili paddingna$spacer
4- (podrazumevano) za klase koje postavljaju marginili paddingna$spacer * 1.5
5- (podrazumevano) 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 mape 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

Uz to, Bootstrap također uključuje .mx-autoklasu za horizontalno centriranje sadržaja na nivou bloka fiksne širine – odnosno sadržaja koji ima display: blocki widthskup – postavljanjem horizontalnih 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). Ove negativne margine su podrazumevano onemogućene , ali se mogu omogućiti u Sass-u podešavanjem $enable-negative-margins: true.

Sintaksa je skoro ista kao zadani, pozitivni uslužni programi margine, ali sa 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 gapuslužne programe na roditeljskom grid kontejneru. Ovo može uštedjeti na dodavanju pomoćnih margina pojedinačnim stavkama mreže (djeca display: gridkontejnera). Gap uslužni programi su prilagodljivi prema zadanim postavkama i generišu se preko našeg API-ja za pomoćne programe, na osnovu $spacersSass mape.

Stavka mreže 1

Mrežna stavka 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 prelomne tačke Bootstrapa mreže, kao i šest veličina sa $spacersmape ( 0– 5). Ne postoji .gap-autouslužna klasa jer je zapravo ista kao .gap-0.

Sass

Mape

Uslužni programi za razmake se deklariraju preko Sass mape, a zatim se generiraju pomoću našeg uslužnog API-ja.

$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

Uslužni programi za razmak deklarirani su u našem API-ju uslužnih programa u scss/_utilities.scss. Naučite kako koristiti uslužni API.

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