Mřížkový systém
Použijte naši výkonnou mobilní flexbox mřížku k vytvoření rozvržení všech tvarů a velikostí díky dvanácti sloupcovému systému, pěti výchozím responzivním úrovním, Sass proměnným a mixinům a desítkám předdefinovaných tříd.
Jak to funguje
Mřížkový systém Bootstrapu používá k rozvržení a zarovnání obsahu řadu kontejnerů, řádků a sloupců. Je postaven s flexboxem a je plně citlivý. Níže je uveden příklad a podrobný pohled na to, jak se mřížka spojuje.
Nový nebo neznáte flexbox? Přečtěte si tuto příručku CSS Tricks flexbox , kde najdete pozadí, terminologii, pokyny a úryvky kódu.
<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>
Výše uvedený příklad vytvoří tři sloupce stejné šířky na malých, středních, velkých a extra velkých zařízeních pomocí našich předdefinovaných tříd mřížky. Tyto sloupce jsou vycentrovány na stránce s nadřazeným prvkem .container
.
Když to rozebereme, funguje to takto:
- Kontejnery poskytují prostředky k vystředění a vodorovnému vyložení obsahu vašeho webu. Použijte
.container
pro responzivní šířku pixelů nebo.container-fluid
prowidth: 100%
všechny velikosti zobrazovaných oblastí a zařízení. - Řádky jsou obaly pro sloupce. Každý sloup má horizontální
padding
(tzv. okap) pro ovládání prostoru mezi nimi. Topadding
se pak vyrovnává na řádcích se zápornými okraji. Tímto způsobem je veškerý obsah ve vašich sloupcích vizuálně zarovnán po levé straně. - V rozvržení mřížky musí být obsah umístěn ve sloupcích a pouze sloupce mohou být přímými potomky řádků.
- Díky flexboxu se sloupce mřížky bez specifikovaného
width
automaticky rozloží jako sloupce stejné šířky. Například čtyři instance.col-sm
budou mít každý automaticky šířku 25 % od malého bodu přerušení a výše. Další příklady naleznete v části sloupce automatického rozvržení . - Třídy sloupců udávají počet sloupců, které chcete použít, z možných 12 na řádek. Pokud tedy chcete mít tři sloupce stejné šířky napříč, můžete použít
.col-4
. - Sloupce
width
jsou nastaveny v procentech, takže jsou vždy proměnlivé a mají velikost vzhledem k jejich nadřazenému prvku. - Sloupce jsou horizontální
padding
, aby se vytvořily okapy mezi jednotlivými sloupci, ale můžete je odstranitmargin
z řad apadding
ze sloupců.no-gutters
pomocí.row
. - Aby mřížka reagovala, existuje pět bodů přerušení mřížky, jeden pro každý citlivý bod přerušení : všechny body přerušení (extra malé), malé, střední, velké a extra velké.
- Zarážky mřížky jsou založeny na dotazech na minimální šířku média, což znamená, že se vztahují na tento jeden bod přerušení a všechny nad ním (např.
.col-sm-4
platí pro malá, střední, velká a extra velká zařízení, ale ne pro prvníxs
bod přerušení). - Pro sémantické označení můžete použít předdefinované třídy mřížky (jako
.col-4
) nebo mixiny Sass .
Buďte si vědomi omezení a chyb kolem flexboxu , jako je nemožnost použít některé HTML elementy jako flex kontejnery .
Možnosti mřížky
Zatímco Bootstrap používá em
s nebo rem
s pro definování většiny velikostí, px
s se používají pro zarážky mřížky a šířky kontejneru. Je to proto, že šířka výřezu je v pixelech a nemění se s velikostí písma .
Podívejte se, jak aspekty systému Bootstrap grid fungují na více zařízeních pomocí praktické tabulky.
Extra malý <576px |
Malý ≥576 pixelů |
Střední ≥768 pixelů |
Velké ≥992 pixelů |
Extra velký ≥1200px |
|
---|---|---|---|---|---|
Maximální šířka kontejneru | Žádné (automaticky) | 540 pixelů | 720 pixelů | 960 pixelů | 1140 pixelů |
Předpona třídy | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
počet sloupců | 12 | ||||
Šířka okapu | 30px (15px na každé straně sloupce) | ||||
Vnořitelný | Ano | ||||
Uspořádání sloupců | Ano |
Automatické rozložení sloupců
Využijte třídy sloupců specifické pro bod přerušení pro snadné určování velikosti sloupců bez explicitní číslované třídy, jako je .col-sm-6
.
Stejná šířka
Zde jsou například dvě rozvržení mřížky, která platí pro každé zařízení a výřez, od xs
do xl
. Přidejte libovolný počet tříd bez jednotek pro každý bod přerušení, který potřebujete, a každý sloupec bude mít stejnou šířku.
<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>
Víceřádkový stejně široký
Vytvořte sloupce stejné šířky, které se klenou nad více řádky, vložením a .w-100
tam, kde chcete, aby se sloupce zalomily na nový řádek. Zajistěte, aby byly přestávky responzivní smícháním .w-100
s některými responzivními zobrazovacími nástroji .
Vyskytla se chyba Safari flexbox , která zabránila tomu, aby to fungovalo bez explicitního flex-basis
nebo border
. Existují zástupná řešení pro starší verze prohlížečů, ale neměla by být nutná, pokud vaše cílové prohlížeče nespadají do chybných verzí.
<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>
Nastavení šířky jednoho sloupce
Automatické rozvržení pro sloupce mřížky flexbox také znamená, že můžete nastavit šířku jednoho sloupce a nechat kolem něj automaticky měnit velikost sourozeneckých sloupců. Můžete použít předdefinované třídy mřížky (jak je znázorněno níže), mixy mřížky nebo šířky řádků. Všimněte si, že velikost ostatních sloupců se změní bez ohledu na šířku středového sloupce.
<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>
Obsah proměnlivé šířky
Pomocí col-{breakpoint}-auto
tříd upravte velikost sloupců na základě přirozené šířky jejich obsahu.
<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>
Responzivní třídy
Mřížka Bootstrapu obsahuje pět vrstev předdefinovaných tříd pro vytváření komplexních responzivních rozvržení. Přizpůsobte si velikost sloupců na extra malých, malých, středních, velkých nebo extra velkých zařízeních, jak uznáte za vhodné.
Všechny body zlomu
Pro mřížky, které jsou stejné od nejmenšího zařízení po největší, použijte třídy .col
a .col-*
. Zadejte očíslovanou třídu, když potřebujete sloupec zvláště velké velikosti; jinak se klidně držte .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>
Naskládané do vodorovné polohy
Pomocí jediné sady .col-sm-*
tříd můžete vytvořit základní mřížkový systém, který začíná skládaný a přechází v horizontální na malý bod přerušení ( 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>
Míchejte a spojujte
Nechcete, aby se vaše sloupce jednoduše skládaly do několika vrstev mřížky? Podle potřeby použijte kombinaci různých tříd pro každou úroveň. Pro lepší představu, jak to celé funguje, se podívejte na příklad níže.
<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>
Žlaby
Žlaby mohou být responzivně upraveny pomocí vycpávek specifických pro bod přerušení a tříd užitečnosti záporné marže. Chcete-li změnit okapy v daném řádku, spárujte obslužný program pro zápornou marži na .row
a odpovídající obslužné programy výplně na .col
s. Je možné, že bude nutné upravit .container
i .container-fluid
nadřazený prvek, aby se zabránilo nechtěnému přetečení, a to pomocí znovu odpovídající utility padding.
Zde je příklad přizpůsobení mřížky Bootstrap u velkého lg
bodu přerušení ( ) a výše. Zvýšili jsme .col
výplň pomocí .px-lg-5
, vyrovnali jsme tomu pomocí .mx-lg-n5
na nadřazeném prvku .row
a poté upravili .container
obal 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>
Řádkové sloupce
Pomocí responzivních .row-cols-*
tříd můžete rychle nastavit počet sloupců, které nejlépe vykreslí váš obsah a rozvržení. Zatímco normální .col-*
třídy se vztahují na jednotlivé sloupce (např. .col-md-4
), třídy řádkových sloupců jsou nastaveny na nadřazeném prvku .row
jako zkratka.
Pomocí těchto tříd sloupců řádků můžete rychle vytvořit základní rozvržení mřížky nebo ovládat rozvržení karet.
<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>
Můžete také použít doprovodný mix 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);
}
}
Zarovnání
Pro svislé a vodorovné zarovnání sloupců použijte nástroje pro zarovnání flexboxu. Internet Explorer 10-11 nepodporuje vertikální zarovnání položek Flex, pokud má kontejner Flex, min-height
jak je znázorněno níže. Další podrobnosti viz Flexbugs #3.
Vertikální zarovnání
<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>
Horizontální zarovnání
<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>
Žádné okapy
Žlaby mezi sloupy v našich předdefinovaných třídách mřížky lze odstranit pomocí .no-gutters
. Tím se odstraní záporné margin
s .row
a vodorovné padding
ze všech přímých podřízených sloupců.
Zde je zdrojový kód pro vytváření těchto stylů. Všimněte si, že přepsání sloupců jsou omezena pouze na první podřízené sloupce a jsou cílena prostřednictvím selektoru atributů . I když to generuje specifičtější selektor, výplň sloupců lze ještě dále přizpůsobit pomocí nástrojů pro nastavení mezer .
Potřebujete design od okraje k okraji? Pusťte rodič .container
nebo .container-fluid
.
.no-gutters {
margin-right: 0;
margin-left: 0;
> .col,
> [class*="col-"] {
padding-right: 0;
padding-left: 0;
}
}
V praxi to vypadá takto. Všimněte si, že to můžete i nadále používat se všemi ostatními předdefinovanými třídami mřížky (včetně šířek sloupců, responzivních vrstev, změn pořadí a dalších).
<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>
Obtékání sloupů
Pokud je v jednom řádku umístěno více než 12 sloupců, každá skupina nadbytečných sloupců se jako jedna jednotka zalomí do nového řádku.
Protože 9 + 4 = 13 > 12, tento 4sloupcový div se zabalí do nového řádku jako jedna souvislá jednotka.
Následující sloupce pokračují podél nového řádku.
<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>
Sloupce se zlomí
Rozdělení sloupců na nový řádek ve flexboxu vyžaduje malý hack: přidejte prvek s width: 100%
kdekoli, kde chcete zalomit sloupce do nového řádku. Normálně je toho dosaženo s násobkem .row
s, ale ne každá metoda implementace to může vysvětlovat.
<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>
Tuto přestávku můžete také použít v určitých bodech přerušení pomocí našich responzivních zobrazovacích nástrojů .
<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>
Změna pořadí
Objednat třídy
Použijte .order-
třídy pro ovládání vizuálního pořadí vašeho obsahu. Tyto třídy jsou responzivní, takže můžete nastavit order
bod přerušení (např. .order-1.order-md-2
). Zahrnuje podporu pro 1
přes 12
všech pět vrstev mřížky.
<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>
Existují také responzivní třídy .order-first
a .order-last
třídy, které mění order
element použitím order: -1
a order: 13
( order: $columns + 1
). Tyto třídy lze také podle potřeby kombinovat s číslovanými .order-*
třídami.
<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>
Odsazení sloupků
Sloupce mřížky můžete odsadit dvěma způsoby: našimi responzivními .offset-
třídami mřížky a našimi nástroji pro okraje . Třídy mřížky mají velikost tak, aby odpovídaly sloupcům, zatímco okraje jsou užitečnější pro rychlé rozvržení, kde je šířka odsazení proměnná.
Offsetové třídy
Přesunout sloupce doprava pomocí .offset-md-*
tříd. Tyto třídy zvětšují levý okraj sloupce o *
sloupce. Například .offset-md-4
přesune .col-md-4
přes čtyři sloupce.
<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>
Kromě vymazání sloupců v responzivních zarážkách může být nutné resetovat posuny. Podívejte se na to v akci v příkladu mřížky .
<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>
Maržové nástroje
S přechodem na flexbox ve verzi 4 můžete použít nástroje pro okraje, jako .mr-auto
je vynucení sourozeneckých sloupců od sebe.
<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>
Hnízdění
Chcete-li obsah vnořit do výchozí mřížky, přidejte do existujícího sloupce nový .row
a sadu sloupců . Vnořené řádky by měly obsahovat sadu sloupců, jejichž celkový počet je 12 nebo méně (není nutné použít všech 12 dostupných sloupců)..col-sm-*
.col-sm-*
<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>
Sass mixiny
Když používáte zdrojové soubory Sass Bootstrapu, máte možnost použít proměnné a mixiny Sass k vytvoření vlastních, sémantických a responzivních rozvržení stránky. Naše předdefinované třídy mřížky používají stejné proměnné a mixiny, aby poskytovaly celou sadu tříd připravených k použití pro rychle reagující rozvržení.
Proměnné
Proměnné a mapy určují počet sloupců, šířku mezery a bod dotazu na média, ve kterém mají začít plovoucí sloupce. Používáme je ke generování předdefinovaných tříd mřížky zdokumentovaných výše, stejně jako pro vlastní mixiny uvedené níže.
$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
);
Mixins
Mixiny se používají ve spojení s proměnnými mřížky ke generování sémantických CSS pro jednotlivé sloupce mřížky.
// 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);
Příklad použití
Proměnné můžete upravit na své vlastní hodnoty, nebo jen použít mixiny s jejich výchozími hodnotami. Zde je příklad použití výchozího nastavení k vytvoření rozvržení se dvěma sloupci s mezerou mezi 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>
Přizpůsobení mřížky
Pomocí našich vestavěných proměnných a map Sass mřížky je možné zcela přizpůsobit předdefinované třídy mřížky. Změňte počet vrstev, rozměry dotazu na média a šířky kontejneru – poté znovu zkompilujte.
Sloupy a okapy
Počet sloupců mřížky lze upravit pomocí proměnných Sass. $grid-columns
se používá ke generování šířek (v procentech) každého jednotlivého sloupce a zároveň $grid-gutter-width
nastavuje šířku okapů sloupců.
$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;
Vrstvy mřížky
Pokud se přesunete za samotné sloupce, můžete také upravit počet vrstev mřížky. Pokud byste chtěli pouze čtyři úrovně mřížky, aktualizovali byste $grid-breakpoints
a $container-max-widths
na něco takového:
$grid-breakpoints: (
xs: 0,
sm: 480px,
md: 768px,
lg: 1024px
);
$container-max-widths: (
sm: 420px,
md: 720px,
lg: 960px
);
Při provádění jakýchkoli změn v proměnných nebo mapách Sass budete muset změny uložit a znovu zkompilovat. Pokud tak učiníte, bude výstupem zcela nová sada předdefinovaných tříd mřížky pro šířky sloupců, odsazení a řazení. Budou také aktualizovány nástroje pro responzivní viditelnost, aby mohly používat vlastní zarážky. Nezapomeňte nastavit hodnoty mřížky v px
(nikoli rem
, em
, nebo %
).