Bootstrap 4 Grid Medium

Příklad střední mřížky

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

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

Pro střední zařízení použijeme .col-md-*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".

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

Použití pouze střední

V níže uvedeném příkladu specifikujeme pouze .col-md-6třídu (bez .col-sm-*). To znamená, že střední, velká a extra velká zařízení se rozdělí 50 %/50 % – protože třída se zvětšuje. U malých a extra malých zařízení se však bude stohovat 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-md-*a použít .col-mdtří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ž 768 pixelů , sloupce se budou skládat vodorovně:

Další kapitola ukazuje, jak přidat různé procento rozdělení pro velká zařízení.