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.

Wyśrodkowany element

<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). Od wersji 4.2 dodaliśmy narzędzia ujemnego marginesu dla każdego niezerowego rozmiaru liczby całkowitej wymienionego powyżej (np. , , 1, 2, 3) . Te narzędzia są idealne do dostosowywania rynien słupów siatki w punktach przerwania.45

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

Oto przykład dostosowywania siatki Bootstrap w punkcie mdprzerwania medium ( ) i powyżej. Zwiększyliśmy .coldopełnienie za pomocą .px-md-5, a następnie przeciwdziałaliśmy temu za .mx-md-n5pomocą rodzica .row.

Niestandardowe wypełnienie kolumn

<div class="row mx-md-n5">
  <div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
  <div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
</div>