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 margin
lub padding
wartoś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 .25rem
do 3rem
.
Notacja
Narzędzia rozmieszczania, które mają zastosowanie do wszystkich punktów przerwania, od xs
do xl
, nie zawierają skrótu punktu przerwania. Dzieje się tak, ponieważ te klasy są stosowane od min-width: 0
i 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 xs
i {property}{sides}-{breakpoint}-{size}
for sm
, md
, lg
i 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-top
lubpadding-top
b
- dla klas, które ustawiająmargin-bottom
lubpadding-bottom
l
- dla klas, które ustawiająmargin-left
lubpadding-left
r
- dla klas, które ustawiająmargin-right
lubpadding-right
x
- dla klas, które ustawiają zarówno*-left
i*-right
y
- dla klas, które ustawiają zarówno*-top
i*-bottom
- puste - dla klas ustawiających a
margin
lubpadding
na wszystkich 4 bokach elementu
Gdzie rozmiar jest jednym z:
0
- dla zajęć eliminującychmargin
lubpadding
ustawiając je na0
1
- (domyślnie) dla klas, które ustawiająmargin
lubpadding
na$spacer * .25
2
- (domyślnie) dla klas, które ustawiająmargin
lubpadding
na$spacer * .5
3
- (domyślnie) dla klas, które ustawiająmargin
lubpadding
na$spacer
4
- (domyślnie) dla klas, które ustawiająmargin
lubpadding
na$spacer * 1.5
5
- (domyślnie) dla klas, które ustawiająmargin
lubpadding
na$spacer * 3
auto
- dla klas, które ustawiająmargin
na auto
(Możesz dodać więcej rozmiarów, dodając wpisy do $spacers
zmiennej 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-auto
klasę do poziomego centrowania zawartości na poziomie bloku o stałej szerokości — to znaczy zawartości, która zawiera display: block
zestaw width
— przez ustawienie marginesów poziomych na auto
.
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
Marża ujemna
W CSS margin
właściwości mogą wykorzystywać wartości ujemne ( padding
nie 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.4
5
Składnia jest prawie taka sama jak domyślne, dodatnie narzędzia marginesu, ale z dodatkiem n
przed żą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 md
przerwania medium ( ) i powyżej. Zwiększyliśmy .col
dopełnienie za pomocą .px-md-5
, a następnie przeciwdziałaliśmy temu za .mx-md-n5
pomocą rodzica .row
.
<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>