Vzdálenost

Bootstrap obsahuje širokou škálu zkráceně reagující třídy margin, padding a gap pro úpravu vzhledu prvku.

Na této straně

Okraj a výplň

Přiřaďte prvku marginnebo paddingpodmnožině jeho stran pomocí zkrácených tříd, resp. Zahrnuje podporu pro jednotlivé vlastnosti, všechny vlastnosti a vertikální a horizontální vlastnosti. Třídy jsou sestaveny z výchozí mapy Sass v rozsahu od .25remdo 3rem.

Používáte modul rozložení mřížky CSS? Zvažte místo toho použití nástroje gap .

Notový zápis

Obslužné programy pro nastavení mezer, které se vztahují na všechny zarážky, od xsdo xxl, nemají v sobě žádnou zkratku zarážek. Je to proto, že tyto třídy jsou aplikovány od min-width: 0a výše, a proto nejsou vázány dotazem na média. Zbývající zarážky však obsahují zkratku zarážek.

Třídy jsou pojmenovány pomocí formátu {property}{sides}-{size}for xsa {property}{sides}-{breakpoint}-{size}for sm, md, lg, xla xxl.

Kde nemovitost je jedna z:

m- pro třídy, které nastavujímargin
p- pro třídy, které nastavujípadding

Kde strany je jedna z:

t- pro třídy, které nastavují margin-toppopřpadding-top
b- pro třídy, které nastavují margin-bottompopřpadding-bottom
s- (start) pro třídy, které nastavují margin-leftnebo padding-leftv LTR, margin-rightnebo padding-rightv RTL
e- (end) pro třídy, které nastavují margin-rightnebo padding-rightv LTR, margin-leftnebo padding-leftv RTL
x- pro třídy, které nastavují jak *-lefta*-right
y- pro třídy, které nastavují jak *-topa*-bottom
prázdné - pro třídy, které nastavují a marginnebo paddingna všech 4 stranách prvku

Kde velikost je jedna z:

0- pro třídy, které eliminují marginnebo paddingnastavením na0
1- (ve výchozím nastavení) pro třídy, které nastavují marginnebopadding$spacer * .25
2- (ve výchozím nastavení) pro třídy, které nastavují marginnebopadding$spacer * .5
3- (ve výchozím nastavení) pro třídy, které nastavují marginnebopadding$spacer
4- (ve výchozím nastavení) pro třídy, které nastavují marginnebopadding$spacer * 1.5
5- (ve výchozím nastavení) pro třídy, které nastavují marginnebopadding$spacer * 3
auto- pro třídy, které nastavují marginna auto

(Další velikosti můžete přidat přidáním položek do $spacersproměnné mapy Sass.)

Příklady

Zde je několik reprezentativních příkladů těchto tříd:

.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ální centrování

Bootstrap navíc obsahuje také .mx-autotřídu pro horizontální centrování obsahu na úrovni bloku s pevnou šířkou – tedy obsahu, který má display: blocka widthsadu – nastavením vodorovných okrajů na auto.

Středový prvek

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

Záporná marže

V CSS mohou marginvlastnosti využívat záporné hodnoty ( paddingnelze). Tyto záporné okraje jsou ve výchozím nastavení zakázány , ale lze je povolit v Sass nastavením $enable-negative-margins: true.

Syntaxe je téměř stejná jako u výchozích obslužných programů s kladnou marží, ale s přidáním npřed požadovanou velikost. Zde je příklad třídy, která je opakem .mt-1:

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

Mezera

Při použití display: grid, můžete využít gapnástroje na nadřazeném mřížkovém kontejneru. To může ušetřit nutnost přidávat nástroje pro okraje k jednotlivým položkám mřížky (děti display: gridkontejneru). Gap utility ve výchozím nastavení reagují a jsou generovány prostřednictvím našeho API utilit na základě $spacersmapy Sass.

Položka mřížky 1

Položka mřížky 2

Položka mříž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 zahrnuje responzivní možnosti pro všechny zarážky mřížky Bootstrapu a také šest velikostí z $spacersmapy ( 0– 5). Neexistuje žádná .gap-autopomocná třída, protože je v podstatě stejná jako .gap-0.

Sass

Mapy

Nástroje pro rozestupy jsou deklarovány prostřednictvím mapy Sass a poté generovány pomocí našeho rozhraní API pro nástroje.

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

Utility API

Nástroje pro vytváření mezer jsou deklarovány v našem rozhraní API pro nástroje v scss/_utilities.scss. Naučte se používat rozhraní API utilit.

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