Rozstaw

Margines i dopełnienie

Przypisz responsywne marginlub paddingwartości do elementu lub podzbioru jego boków za pomocą klas skróconych. Obejmuje obsługę poszczególnych właściwości, wszystkich właściwości oraz właściwości pionowych i poziomych. Klasy są budowane na podstawie domyślnej mapy Sass od .25remdo 3rem.

Notacja

Narzędzia rozmieszczania, które mają zastosowanie do wszystkich punktów przerwania, od xsdo xxl, nie zawierają skrótu punktu przerwania. Dzieje się tak, ponieważ te klasy są stosowane od min-width: 0i do góry, a zatem nie są związane z zapytaniem o media. Jednak pozostałe punkty przerwania zawierają skrót punktu przerwania.

Klasy są nazywane przy użyciu formatu {property}{sides}-{size}for xsi {property}{sides}-{breakpoint}-{size}for sm, md, lg, xli xxl.

Gdzie nieruchomość jest jedną z:

• m- dla klas, które ustawiająmargin
• p- dla klas, które ustawiająpadding

Gdzie boki to jedna z:

• t- dla klas, które ustawiają margin-toplubpadding-top
• b- dla klas, które ustawiają margin-bottomlubpadding-bottom
• s- (start) dla klas, które ustawiają margin-leftlub padding-leftw LTR, margin-rightlub padding-rightw RTL
• e- (koniec) dla klas, które ustawiają margin-rightlub padding-rightw LTR, margin-leftlub padding-leftw RTL
• x- dla klas, które ustawiają zarówno *-lefti*-right
• y- dla klas, które ustawiają zarówno *-topi*-bottom
• puste - dla klas ustawiających a marginlub paddingna wszystkich 4 bokach elementu

Gdzie rozmiar jest jednym z:

• 0- dla zajęć eliminujących marginlub paddingustawiając je na0
• 1- (domyślnie) dla klas, które ustawiają marginlub paddingna$spacer * .25
• 2- (domyślnie) dla klas, które ustawiają marginlub paddingna$spacer * .5
• 3- (domyślnie) dla klas, które ustawiają marginlub paddingna$spacer
• 4- (domyślnie) dla klas, które ustawiają marginlub paddingna$spacer * 1.5
• 5- (domyślnie) dla klas, które ustawiają marginlub paddingna$spacer * 3
• auto- dla klas, które ustawiają marginna auto

(Możesz dodać więcej rozmiarów, dodając wpisy do $spacerszmiennej mapy Sass.)

Przykłady

Oto kilka reprezentatywnych przykładów tych klas:

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

Centrowanie w poziomie

Ponadto Bootstrap zawiera również .mx-autoklasę do poziomego centrowania zawartości na poziomie bloku o stałej szerokości — to znaczy zawartości, która zawiera display: blockzestaw width— przez ustawienie marginesów poziomych na auto.

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

Marża ujemna

W CSS marginwłaściwości mogą wykorzystywać wartości ujemne ( paddingnie można). Te ujemne marginesy są domyślnie wyłączone , ale można je włączyć w Sass poprzez ustawienie $enable-negative-margins: true.

Składnia jest prawie taka sama jak domyślne, dodatnie narzędzia marginesu, ale z dodatkiem nprzed żądanym rozmiarem. Oto przykładowa klasa, która jest przeciwieństwem .mt-1:

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

Luka

Używając display: grid, możesz skorzystać z gapnarzędzi w kontenerze siatki nadrzędnej. Pozwala to zaoszczędzić na konieczności dodawania narzędzi marginesów do poszczególnych elementów siatki (podrzędnych display: gridkontenera). Narzędzia Gap są domyślnie responsywne i są generowane za pośrednictwem naszego API narzędziowego na podstawie $spacersmapy Sass.

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

Wsparcie obejmuje responsywne opcje dla wszystkich punktów przerwania siatki Bootstrap, a także sześć rozmiarów z $spacersmapy ( 0– 5). Nie ma .gap-autoklasy użytkowej, ponieważ jest praktycznie taka sama jak .gap-0.

Sass

Mapy

Narzędzia rozmieszczania są deklarowane za pomocą mapy Sass, a następnie generowane za pomocą naszego narzędzia API.

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

Narzędzia API

Narzędzia rozmieszczania są deklarowane w naszym interfejsie API narzędzi w scss/_utilities.scss. Dowiedz się, jak korzystać z interfejsu API narzędzi.

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