Rozstaw

Bootstrap zawiera szeroką gamę skróconych responsywnych klas narzędziowych marginesów i dopełniania, aby zmodyfikować wygląd elementu.

Jak to działa

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 xl, 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, lgi xl.

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
• l- dla klas, które ustawiają margin-leftlubpadding-left
• r- dla klas, które ustawiają margin-rightlubpadding-right
• 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;
}

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