Bootstrap Grid – Skládaný vodorovně
Příklad zaváděcí mřížky: Skládaný-vodorovně
Vytvoříme základní mřížkový systém, který začíná naskládaným na extra malých zařízeních, než se stane horizontálním na větších zařízeních.
Následující příklad ukazuje jednoduché rozvržení se dvěma sloupci „skládaný vodorovně“, což znamená, že výsledkem bude rozdělení 50 %/50 % na všech obrazovkách, s výjimkou extra malých obrazovek, které se automaticky složí (100 %):
col-sm-6
col-sm-6
Příklad: Stacked-to-horizontal
<div class="container">
<h1>Hello World!</h1>
<div class="row">
<div class="col-sm-6" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-6" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
Tip: Čísla ve .col-sm-*třídách udávají, kolik sloupců by měl div zahrnovat (z 12). Takže .col-sm-1zahrnuje 1 sloupec, .col-sm-44 sloupce,
.col-sm-66 sloupců atd.
Poznámka: Dbejte na to, aby součet vždy činil 12!
Tip: Jakékoli rozvržení s pevnou šířkou můžete změnit na rozvržení s plnou šířkou změnou .containertřídy na .container-fluid:
Příklad: Nádoba na kapalinu
<div class="container-fluid">
<h1>Hello World!</h1>
<div class="row">
<div class="col-sm-6" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-6" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>