System siatki
Wykorzystaj naszą potężną siatkę Flexbox dla urządzeń mobilnych, aby tworzyć układy o różnych kształtach i rozmiarach dzięki systemowi dwunastu kolumn, pięciu domyślnym responsywnym warstwom, zmiennym i domieszkom Sass oraz dziesiątkom predefiniowanych klas.
Jak to działa
System siatki Bootstrap wykorzystuje szereg kontenerów, wierszy i kolumn do układania i wyrównywania zawartości. Jest zbudowany z flexbox i jest w pełni responsywny. Poniżej znajduje się przykład i szczegółowe spojrzenie na to, jak łączy się siatka.
Nowy lub nie znasz flexboxa? Przeczytaj ten przewodnik po sztuczkach CSS flexbox, aby poznać tło, terminologię, wytyczne i fragmenty kodu.
<div class="container">
<div class="row">
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
</div>
</div>
Powyższy przykład tworzy trzy kolumny o równej szerokości na małych, średnich, dużych i bardzo dużych urządzeniach przy użyciu naszych predefiniowanych klas siatek. Te kolumny są wyśrodkowane na stronie z elementem nadrzędnym .container
.
Rozbijając to, oto jak to działa:
- Kontenery umożliwiają wyśrodkowanie i wyrównanie zawartości witryny w poziomie. Użyj
.container
, aby uzyskać responsywną szerokość w pikselach lub.container-fluid
wewidth: 100%
wszystkich widocznych obszarach i rozmiarach urządzeń. - Wiersze to opakowania dla kolumn. Każda kolumna ma poziomą
padding
(zwaną rynną) do kontrolowania przestrzeni między nimi. Jestpadding
to następnie przeciwdziałane w rzędach z ujemnymi marginesami. W ten sposób cała zawartość Twoich kolumn jest wizualnie wyrównana do lewej strony. - W układzie siatki zawartość musi być umieszczona w kolumnach, a tylko kolumny mogą być bezpośrednimi elementami podrzędnymi wierszy.
- Dzięki flexbox, kolumny siatki bez określonego
width
zostaną automatycznie ustawione jako kolumny o równej szerokości. Na przykład cztery wystąpienia.col-sm
będą automatycznie miały szerokość 25% od małego punktu przerwania w górę. Zobacz sekcję kolumn z automatycznym układem , aby uzyskać więcej przykładów. - Klasy kolumn wskazują liczbę kolumn, których chcesz użyć z możliwych 12 na wiersz. Jeśli więc potrzebujesz trzech kolumn o równej szerokości, możesz użyć
.col-4
. - Kolumny
width
są ustawiane w procentach, więc zawsze są płynne i mają rozmiar w stosunku do elementu nadrzędnego. - Kolumny są poziome,
padding
aby utworzyć rynny między poszczególnymi kolumnami, jednak możesz usunąćmargin
z wierszy ipadding
kolumn za.no-gutters
pomocą przycisku.row
. - Aby siatka była responsywna, istnieje pięć punktów przerwania siatki, po jednym dla każdego reagującego punktu przerwania : wszystkie punkty przerwania (bardzo małe), małe, średnie, duże i bardzo duże.
- Punkty przerwania siatki są oparte na zapytaniach o media o minimalnej szerokości, co oznacza, że mają zastosowanie do tego jednego punktu przerwania i wszystkich powyżej niego (np.
.col-sm-4
dotyczą małych, średnich, dużych i bardzo dużych urządzeń, ale nie pierwszegoxs
punktu przerwania). - Możesz użyć predefiniowanych klas siatek (takich jak
.col-4
) lub domieszek Sass, aby uzyskać bardziej semantyczne znaczniki.
Bądź świadomy ograniczeń i błędów związanych z flexboxem , takich jak niemożność użycia niektórych elementów HTML jako elastycznych kontenerów .
Opcje siatki
Podczas gdy Bootstrap używa em
s lub rem
s do definiowania większości rozmiarów, px
s są używane do punktów przerwania siatki i szerokości kontenerów. Dzieje się tak, ponieważ szerokość widocznego obszaru jest wyrażona w pikselach i nie zmienia się wraz z rozmiarem czcionki .
Zobacz, jak różne aspekty systemu Bootstrap działają na wielu urządzeniach za pomocą poręcznej tabeli.
Bardzo mały <576px |
Mały ≥576 pikseli |
Średni ≥768px |
Duży ≥992px |
Bardzo duże ≥1200px |
|
---|---|---|---|---|---|
Maksymalna szerokość pojemnika | Brak (automatycznie) | 540px | 720px | 960px | 1140px |
Prefiks klasy | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
# kolumn | 12 | ||||
Szerokość rynny | 30px (15px z każdej strony kolumny) | ||||
Gniazdowy | TAk | ||||
Kolejność kolumn | TAk |
Kolumny z automatycznym układem
Korzystaj z klas kolumn specyficznych dla punktów przerwania, aby łatwo zmieniać rozmiar kolumn bez jawnej klasy numerowanej, takiej jak .col-sm-6
.
Równej szerokości
Na przykład oto dwa układy siatki, które mają zastosowanie do każdego urządzenia i rzutni, od xs
do xl
. Dodaj dowolną liczbę klas bez jednostek dla każdego potrzebnego punktu przerwania, a każda kolumna będzie miała tę samą szerokość.
<div class="container">
<div class="row">
<div class="col">
1 of 2
</div>
<div class="col">
2 of 2
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col">
2 of 3
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
Wiele linii o równej szerokości
Utwórz kolumny o równej szerokości, które obejmują wiele wierszy, wstawiając znak w miejscu, w .w-100
którym kolumny mają być łamane do nowego wiersza. Spraw, aby przerwy były responsywne, mieszając je .w-100
z niektórymi narzędziami do wyświetlania .
Wystąpił błąd Safari flexbox , który uniemożliwiał działanie bez wyraźnego flex-basis
lub border
. Istnieją obejścia dla starszych wersji przeglądarek, ale nie powinny być one konieczne, jeśli docelowe przeglądarki nie są objęte błędami.
<div class="container">
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="w-100"></div>
<div class="col">col</div>
<div class="col">col</div>
</div>
</div>
Ustawianie szerokości jednej kolumny
Automatyczne rozmieszczenie kolumn siatki Flexbox oznacza również, że możesz ustawić szerokość jednej kolumny i automatycznie zmienić rozmiar kolumn wokół niej. Możesz użyć predefiniowanych klas siatek (jak pokazano poniżej), mixinów siatek lub szerokości w linii. Zwróć uwagę, że inne kolumny zmienią rozmiar bez względu na szerokość kolumny środkowej.
<div class="container">
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-6">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-5">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
Zawartość o zmiennej szerokości
Użyj col-{breakpoint}-auto
klas, aby określić rozmiar kolumn na podstawie naturalnej szerokości ich zawartości.
<div class="container">
<div class="row justify-content-md-center">
<div class="col col-lg-2">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
</div>
Klasy responsywne
Siatka Bootstrap zawiera pięć poziomów predefiniowanych klas do budowania złożonych, responsywnych układów. Dostosuj rozmiar swoich kolumn na bardzo małych, małych, średnich, dużych lub bardzo dużych urządzeniach według własnego uznania.
Wszystkie punkty przerwania
W przypadku siatek, które są takie same od najmniejszego urządzenia do największego, użyj klas .col
i . .col-*
Określ numerowaną klasę, gdy potrzebujesz kolumny o szczególnie dużym rozmiarze; w przeciwnym razie możesz trzymać się .col
.
<div class="container">
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
<div class="row">
<div class="col-8">col-8</div>
<div class="col-4">col-4</div>
</div>
</div>
Ułożone w poziomie
Używając pojedynczego zestawu .col-sm-*
klas, możesz utworzyć podstawowy system siatki, który zaczyna się ułożony w stos i staje się poziomy w małym punkcie przerwania ( sm
).
<div class="container">
<div class="row">
<div class="col-sm-8">col-sm-8</div>
<div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
</div>
</div>
Mieszać i łączyć
Nie chcesz, aby Twoje kolumny po prostu układały się w niektóre poziomy siatki? W razie potrzeby użyj kombinacji różnych klas dla każdego poziomu. Zobacz poniższy przykład, aby lepiej zrozumieć, jak to wszystko działa.
<div class="container">
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>
Rynny
Rynny mogą być odpowiednio dostosowywane przez dopełnienie specyficzne dla punktu przerwania i klasy użyteczności ujemnego marginesu. Aby zmienić rynny w danym rzędzie, sparuj narzędzie ujemnego marginesu na .row
i pasujące narzędzia dopełniania na .col
s. Może zaistnieć potrzeba dostosowania elementu lub rodzica, aby uniknąć niepożądanego przepełnienia, używając ponownie narzędzia dopasowującego dopełnianie .container
..container-fluid
Oto przykład dostosowywania siatki Bootstrap w dużym punkcie lg
przerwania ( ) i powyżej. Zwiększyliśmy .col
dopełnienie za pomocą .px-lg-5
, przeciwdziałaliśmy temu za .mx-lg-n5
pomocą elementu nadrzędnego .row
, a następnie dostosowaliśmy .container
opakowanie za pomocą .px-lg-5
.
<div class="container px-lg-5">
<div class="row mx-lg-n5">
<div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
<div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
</div>
</div>
Kolumny wierszy
Użyj .row-cols-*
klas responsywnych, aby szybko ustawić liczbę kolumn, które najlepiej renderują treść i układ. Podczas gdy normalne .col-*
klasy odnoszą się do poszczególnych kolumn (np. .col-md-4
), klasy kolumn wierszy są ustawiane na rodzicu .row
jako skrót.
Użyj tych klas kolumn wierszy, aby szybko utworzyć podstawowe układy siatki lub kontrolować układy kart.
<div class="container">
<div class="row row-cols-2">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-3">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col-6">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
Możesz również użyć dołączonego mixinu Sass, row-cols()
:
.element {
// Three columns to start
@include row-cols(3);
// Five columns from medium breakpoint up
@include media-breakpoint-up(md) {
@include row-cols(5);
}
}
Wyrównanie
Użyj narzędzi do wyrównywania flexbox, aby wyrównać kolumny w pionie i poziomie. Internet Explorer 10-11 nie obsługuje pionowego wyrównania elementów elastycznych, gdy kontener elastyczny ma min-height
pokazany poniżej. Zobacz Flexbugs #3 po więcej szczegółów.
Wyrównanie w pionie
<div class="container">
<div class="row align-items-start">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
<div class="row align-items-center">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
<div class="row align-items-end">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col align-self-start">
One of three columns
</div>
<div class="col align-self-center">
One of three columns
</div>
<div class="col align-self-end">
One of three columns
</div>
</div>
</div>
Wyrównanie w poziomie
<div class="container">
<div class="row justify-content-start">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-center">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-end">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-around">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-between">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
</div>
Brak rynien
Rynny między kolumnami w naszych predefiniowanych klasach siatki można usunąć za pomocą .no-gutters
. Spowoduje to usunięcie ujemnych margin
s .row
i poziomych padding
ze wszystkich najbliższych kolumn podrzędnych.
Oto kod źródłowy do tworzenia tych stylów. Zwróć uwagę, że nadpisania kolumn dotyczą tylko pierwszych kolumn podrzędnych i są kierowane za pomocą selektora atrybutów . Chociaż generuje to bardziej szczegółowy selektor, wypełnienie kolumn można nadal dostosowywać za pomocą narzędzi do ustawiania odstępów .
Potrzebujesz projektu od krawędzi do krawędzi? Usuń rodzica .container
lub .container-fluid
.
.no-gutters {
margin-right: 0;
margin-left: 0;
> .col,
> [class*="col-"] {
padding-right: 0;
padding-left: 0;
}
}
W praktyce tak to wygląda. Pamiętaj, że możesz nadal używać tego ze wszystkimi innymi predefiniowanymi klasami siatki (w tym szerokościami kolumn, warstwami responsywnymi, zmianą kolejności i nie tylko).
<div class="row no-gutters">
<div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
Zawijanie kolumn
Jeśli w jednym rzędzie znajduje się więcej niż 12 kolumn, każda grupa dodatkowych kolumn, jako jedna jednostka, zawinie się w nowy wiersz.
Ponieważ 9 + 4 = 13 > 12, ten czterokolumnowy div jest umieszczany w nowej linii jako jedna ciągła jednostka.
Kolejne kolumny są kontynuowane wzdłuż nowej linii.
<div class="container">
<div class="row">
<div class="col-9">.col-9</div>
<div class="col-4">.col-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
<div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
</div>
</div>
Łamanie kolumn
Łamanie kolumn do nowej linii w flexboksie wymaga małego hacka: dodaj element z width: 100%
dowolnym miejscem, w którym chcesz zawinąć kolumny do nowej linii. Zwykle odbywa się to za pomocą wielu .row
s, ale nie każda metoda implementacji może to wyjaśnić.
<div class="container">
<div class="row">
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<!-- Force next columns to break to new line -->
<div class="w-100"></div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
</div>
</div>
Możesz również zastosować to przerwanie w określonych punktach przerwania za pomocą naszych narzędzi do responsywnego wyświetlania .
<div class="container">
<div class="row">
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<!-- Force next columns to break to new line at md breakpoint and up -->
<div class="w-100 d-none d-md-block"></div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
</div>
</div>
Zmiana kolejności
Zamów zajęcia
Użyj .order-
klas do kontrolowania wizualnej kolejności treści. Te klasy są responsywne, więc możesz ustawić je order
według punktu przerwania (np .order-1.order-md-2
. ). Obejmuje wsparcie dla 1
wszystkich 12
pięciu poziomów siatki.
<div class="container">
<div class="row">
<div class="col">
First in DOM, no order applied
</div>
<div class="col order-12">
Second in DOM, with a larger order
</div>
<div class="col order-1">
Third in DOM, with an order of 1
</div>
</div>
</div>
Istnieją również responsywne .order-first
i .order-last
klasy, które zmieniają order
element poprzez zastosowanie odpowiednio order: -1
i order: 13
( order: $columns + 1
). Klasy te można również mieszać z .order-*
klasami ponumerowanymi w razie potrzeby.
<div class="container">
<div class="row">
<div class="col order-last">
First in DOM, ordered last
</div>
<div class="col">
Second in DOM, unordered
</div>
<div class="col order-first">
Third in DOM, ordered first
</div>
</div>
</div>
Przesunięcie kolumn
Możesz przesunąć kolumny siatki na dwa sposoby: nasze responsywne .offset-
klasy siatki i nasze narzędzia do tworzenia marginesów . Klasy siatki są dopasowane do kolumn, podczas gdy marginesy są bardziej przydatne w przypadku szybkich układów, w których szerokość przesunięcia jest zmienna.
Klasy offsetowe
Przenieś kolumny w prawo za pomocą .offset-md-*
klas. Te klasy zwiększają lewy margines kolumny o *
kolumny. Na przykład .offset-md-4
porusza się .col-md-4
po czterech kolumnach.
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
<div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>
</div>
Oprócz czyszczenia kolumn w responsywnych punktach przerwania może być konieczne zresetowanie odsunięć. Zobacz to w akcji w przykładzie siatki .
<div class="container">
<div class="row">
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
<div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
<div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
</div>
</div>
Narzędzia depozytowe
Po przejściu na flexbox w wersji 4 możesz używać narzędzi .mr-auto
do tworzenia marginesów, takich jak odsuwanie od siebie kolumn rodzeństwa.
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
<div class="row">
<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
</div>
<div class="row">
<div class="col-auto mr-auto">.col-auto .mr-auto</div>
<div class="col-auto">.col-auto</div>
</div>
</div>
Zagnieżdżanie
Aby zagnieździć zawartość z domyślną siatką, dodaj nową .row
i zestaw .col-sm-*
kolumn w istniejącej .col-sm-*
kolumnie. Wiersze zagnieżdżone powinny zawierać zestaw kolumn, które sumują się do 12 lub mniej (nie jest wymagane użycie wszystkich 12 dostępnych kolumn).
<div class="container">
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-8 col-sm-6">
Level 2: .col-8 .col-sm-6
</div>
<div class="col-4 col-sm-6">
Level 2: .col-4 .col-sm-6
</div>
</div>
</div>
</div>
</div>
Mieszanki Sass
Korzystając ze źródłowych plików Sass Bootstrap, masz możliwość używania zmiennych Sass i domieszek do tworzenia niestandardowych, semantycznych i responsywnych układów stron. Nasze predefiniowane klasy grid wykorzystują te same zmienne i domieszki, aby zapewnić cały zestaw gotowych do użycia klas dla szybkich, responsywnych układów.
Zmienne
Zmienne i mapy określają liczbę kolumn, szerokość rynny i punkt zapytania o media, od którego mają się zaczynać kolumny swobodne. Używamy ich do generowania wcześniej zdefiniowanych klas siatek opisanych powyżej, a także do niestandardowych domieszek wymienionych poniżej.
$grid-columns: 12;
$grid-gutter-width: 30px;
$grid-breakpoints: (
// Extra small screen / phone
xs: 0,
// Small screen / phone
sm: 576px,
// Medium screen / tablet
md: 768px,
// Large screen / desktop
lg: 992px,
// Extra large screen / wide desktop
xl: 1200px
);
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px
);
Mieszanki
Domieszki są używane w połączeniu ze zmiennymi siatki do generowania semantycznego CSS dla poszczególnych kolumn siatki.
// Creates a wrapper for a series of columns
@include make-row();
// Make the element grid-ready (applying everything but the width)
@include make-col-ready();
@include make-col($size, $columns: $grid-columns);
// Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);
Przykładowe użycie
Możesz modyfikować zmienne do własnych wartości niestandardowych lub po prostu użyć domieszek z ich wartościami domyślnymi. Oto przykład użycia ustawień domyślnych do utworzenia układu dwukolumnowego z przerwą między nimi.
.example-container {
@include make-container();
// Make sure to define this width after the mixin to override
// `width: 100%` generated by `make-container()`
width: 800px;
}
.example-row {
@include make-row();
}
.example-content-main {
@include make-col-ready();
@include media-breakpoint-up(sm) {
@include make-col(6);
}
@include media-breakpoint-up(lg) {
@include make-col(8);
}
}
.example-content-secondary {
@include make-col-ready();
@include media-breakpoint-up(sm) {
@include make-col(6);
}
@include media-breakpoint-up(lg) {
@include make-col(4);
}
}
<div class="example-container">
<div class="example-row">
<div class="example-content-main">Main content</div>
<div class="example-content-secondary">Secondary content</div>
</div>
</div>
Dostosowywanie siatki
Korzystając z naszych wbudowanych zmiennych i map siatki Sass, można całkowicie dostosować predefiniowane klasy siatki. Zmień liczbę poziomów, wymiary zapytań o media i szerokości kontenerów, a następnie dokonaj ponownej kompilacji.
Kolumny i rynny
Liczbę kolumn siatki można modyfikować za pomocą zmiennych Sass. $grid-columns
służy do generowania szerokości (w procentach) poszczególnych słupów, podczas gdy $grid-gutter-width
ustawia szerokość rynien słupów.
$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;
Poziomy siatki
Wychodząc poza same kolumny, możesz również dostosować liczbę poziomów siatki. Jeśli chcesz mieć tylko cztery poziomy siatki, zaktualizuj $grid-breakpoints
i $container-max-widths
do czegoś takiego:
$grid-breakpoints: (
xs: 0,
sm: 480px,
md: 768px,
lg: 1024px
);
$container-max-widths: (
sm: 420px,
md: 720px,
lg: 960px
);
Wprowadzając jakiekolwiek zmiany w zmiennych Sass lub mapach, musisz je zapisać i ponownie skompilować. Spowoduje to wygenerowanie zupełnie nowego zestawu wstępnie zdefiniowanych klas siatki dla szerokości kolumn, przesunięć i kolejności. Responsywne narzędzia widoczności również zostaną zaktualizowane, aby korzystać z niestandardowych punktów przerwania. Pamiętaj, aby ustawić wartości siatki w px
(nie rem
, em
lub %
).