Medzery

Bootstrap obsahuje širokú škálu tried rýchlo reagujúcich margin, padding a gap na úpravu vzhľadu prvku.

Na tejto stránke

Okraj a výplň

Priraďte k prvku alebo podmnožine jeho strán pomocou tried skratiek responzívny prístup marginalebo hodnoty. paddingZahŕňa podporu pre jednotlivé vlastnosti, všetky vlastnosti a vertikálne a horizontálne vlastnosti. Triedy sú zostavené z predvolenej mapy Sass v rozsahu od .25remdo 3rem.

Používate modul rozloženia mriežky CSS? Namiesto toho zvážte použitie pomôcky pre medzeru .

Notový zápis

Pomôcky na vytváranie medzier, ktoré sa vzťahujú na všetky body prerušenia, od xsdo xxlnemajú v sebe žiadnu skratku bodu prerušenia. Je to preto, že tieto triedy sú aplikované od min-width: 0a vyššie, a teda nie sú viazané dopytom na médiá. Zostávajúce body prerušenia však obsahujú skratku bodu prerušenia.

Triedy sú pomenované pomocou formátu {property}{sides}-{size}pre xsa {property}{sides}-{breakpoint}-{size}pre sm, md, lg, xla xxl.

Ak je nehnuteľnosť jednou z:

m- pre triedy, ktoré nastavujúmargin
p- pre triedy, ktoré nastavujúpadding

Kde strany sú jednou z:

t- pre triedy, ktoré stanovujú margin-topresppadding-top
b- pre triedy, ktoré stanovujú margin-bottomresppadding-bottom
s- (začiatok) pre triedy, ktoré nastavujú margin-leftalebo padding-leftv LTR, margin-rightalebo padding-rightv RTL
e- (koniec) pre triedy, ktoré nastavujú margin-rightalebo padding-rightv LTR, margin-leftalebo padding-leftv RTL
x- pre triedy, ktoré nastavujú *-leftaj*-right
y- pre triedy, ktoré nastavujú *-topaj*-bottom
prázdne - pre triedy, ktoré nastavujú a marginalebo paddingna všetkých 4 stranách prvku

Kde veľkosť je jedna z:

0- pre triedy, ktoré eliminujú marginalebo paddingnastavením na0
1- (predvolene) pre triedy, ktoré nastavujú marginalebopadding$spacer * .25
2- (predvolene) pre triedy, ktoré nastavujú marginalebopadding$spacer * .5
3- (predvolene) pre triedy, ktoré nastavujú marginalebopadding$spacer
4- (predvolene) pre triedy, ktoré nastavujú marginalebopadding$spacer * 1.5
5- (predvolene) pre triedy, ktoré nastavujú marginalebopadding$spacer * 3
auto- pre triedy, ktoré nastavujú marginna auto

(Viac veľkostí môžete pridať pridaním položiek do $spacerspremennej mapy Sass.)

Príklady

Tu je niekoľko reprezentatívnych príkladov týchto tried:

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

Horizontálne centrovanie

Bootstrap navyše obsahuje aj .mx-autotriedu na horizontálne centrovanie obsahu na úrovni bloku s pevnou šírkou – teda obsahu, ktorý má display: blocka widthmnožinu – nastavením horizontálnych okrajov na auto.

Vycentrovaný prvok

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

Záporná marža

V CSS môžu marginvlastnosti využívať záporné hodnoty ( paddingnemôže). Tieto záporné okraje sú predvolene vypnuté , ale v Sass ich možno povoliť nastavením $enable-negative-margins: true.

Syntax je takmer rovnaká ako predvolené nástroje s kladnou maržou, ale s pridaním npred požadovanú veľkosť. Tu je príklad triedy, ktorá je opakom .mt-1:

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

Medzera

Pri použití display: grid, môžete využiť gappomocné programy na rodičovskom mriežkovom kontajneri. To môže ušetriť na pridávaní pomocných nástrojov okrajov k jednotlivým položkám mriežky (deti display: gridkontajnera). Pomôcky Gap sú predvolene responzívne a sú generované prostredníctvom nášho API nástrojov na základe $spacersmapy Sass.

Položka mriežky 1

Položka mriežky 2

Položka mriežky 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>

Podpora zahŕňa možnosti odozvy pre všetky body prerušenia mriežky Bootstrapu, ako aj šesť veľkostí z $spacersmapy ( 0– 5). Neexistuje žiadna .gap-autopomocná trieda, pretože je v podstate rovnaká ako .gap-0.

Sass

Mapy

Pomôcky na vytváranie rozstupov sa deklarujú prostredníctvom mapy Sass a potom sa generujú pomocou nášho rozhrania API pre nástroje.

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

Utilities API

Pomôcky na vytváranie rozstupov sú deklarované v našom rozhraní API pre nástroje v scss/_utilities.scss. Zistite, ako používať pomocné rozhranie 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
    ),
    // Gap utility
    "gap": (
      responsive: true,
      property: gap,
      class: gap,
      values: $spacers
    ),