Bootstrap 4 Grid - Extra velký
Příklad XLarge Grid
| Extra small | Small | Medium | Large | Extra Large | |
|---|---|---|---|---|---|
| Class prefix | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
| Screen width | <576px | >=576px | >=768px | >=992px | >=1200px |
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í a 33%/66% rozdělení na velká zařízení:
<div class="col-sm-3 col-md-6 col-lg-4">....</div>
<div class="col-sm-9 col-md-6 col-lg-8">....</div>
Ale na xlarge zařízeních může být design lepší jako rozdělení 20%/80%.
Extra velká zařízení jsou definována jako zařízení s šířkou obrazovky od 1200 pixelů a více .
Pro xlarge zařízení použijeme .col-xl-*třídy:
<div class="col-sm-3 col-md-6 col-lg-4 col-xl-2">....</div>
<div class="col-sm-9 col-md-6 col-lg-8 col-xl-10">....</div>
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 20 %/80 % rozdělení na xlarge zařízení. Na extra malých zařízeních se automaticky složí (100 %):
Příklad
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-6 col-lg-4
col-xl-2">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-9 col-md-6 col-lg-8
col-xl-10">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
Poznámka: Ujistěte se, že součet je vždy 12.
Použití pouze XLarge
V níže uvedeném příkladu pouze specifikujeme .col-xl-6třídu (bez .col-lg-*, .col-md-*a/nebo .col-sm-*). To znamená, že xlarge zařízení se rozdělí 50%/50%. U velkých, středních, malých A extra malých zařízení se však bude skládat vertikálně (100% šířka):
Příklad
<div class="container-fluid">
<div class="row">
<div class="col-xl-6">
<p>Lorem ipsum...</p>
</div>
<div class="col-xl-6">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
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-xl-*a použít .col-xltří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ž 1200 pixelů , sloupce se budou skládat vodorovně:
<!-- Two columns: 50% width on xlarge and up-->
<div class="row">
<div class="col-xl">1 of
2</div>
<div class="col-xl">2 of 2</div>
</div>
<!-- Four
columns: 25% width on xlarge and up -->
<div class="row">
<div class="col-xl">1 of 4</div>
<div class="col-xl">2 of 4</div>
<div class="col-xl">3
of 4</div>
<div class="col-xl">4 of 4</div>
</div>