Bootstrap 4 Grid – velký

Příklad velké mřížky

V předchozí kapitole jsme uvedli příklad gridu s třídami pro malá a střední zařízení. Použili jsme dva div (sloupce) a dali jsme jim 25%/75% rozdělení na malá zařízení a 50%/50% rozdělení na střední zařízení:

Ale na velkých zařízeních může být design lepší jako rozdělení 33 %/66 %.

Pro velká zařízení použijeme .col-lg-*třídy:

Nyní Bootstrap řekne "u malé velikosti se podívejte na třídy s -sm- a použijte je. Ve střední velikosti se podívejte na třídy s -md- a použijte je. Ve velké velikosti se podívejte na třídy se slovem -lg- a použijte je".

Následující příklad bude mít za následek rozdělení 25 %/75 % na malých zařízeních, 50 %/50 % rozdělení na střední zařízení a rozdělení 33 %/66 % na velká a xlarge zařízení. Na extra malých zařízeních se automaticky složí (100 %):

Použití pouze velké

V níže uvedeném příkladu pouze specifikujeme .col-lg-6třídu (bez .col-md-*a/nebo .col-sm-*). To znamená, že velká a xlarge zařízení se rozdělí 50%/50%. U středních, malých A extra malých zařízení se však bude skládat vertikálně (100% šířka):

Automatické rozložení sloupců

V Bootstrapu 4 existuje snadný způsob, jak vytvořit sloupce stejné šířky pro všechna zařízení: stačí odstranit číslo z .col-lg-*a použít .col-lgtřídu pouze na zadaný počet prvků col . Bootstrap rozpozná, kolik je tam sloupců, a každý sloupec bude mít stejnou šířku.

Pokud je velikost obrazovky menší než 992 pixelů , sloupce se naskládají vodorovně: