Příklady mřížky Bootstrap 4
Níže jsme shromáždili několik příkladů rozložení mřížky Bootstrap 4.
Tři stejné sloupce
Použijte .coltřídu na zadaný počet prvků a Bootstrap rozpozná, kolik prvků existuje (a vytvoří sloupce stejné šířky). V níže uvedeném příkladu používáme tři prvky sloupce, z nichž každý získá šířku 33,33 %.
Příklad
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div
class="col">col</div>
</div>
Tři stejné sloupce pomocí čísel
K ovládání šířky sloupce můžete také použít čísla. Jen se ujistěte, že součet je 12 nebo méně (není nutné, abyste použili všech 12 dostupných sloupců):
Příklad
<div class="row">
<div class="col-4">col-4</div>
<div class="col-4">col-4</div>
<div
class="col-4">col-4</div>
</div>
Tři nestejné sloupce
Chcete-li vytvořit nestejné sloupce, musíte použít čísla. Následující příklad vytvoří rozdělení 25%/50%/25%:
Příklad
<div class="row">
<div class="col-3">col-3</div>
<div class="col-6">col-6</div>
<div
class="col-3">col-3</div>
</div>
Nastavení šířky jednoho sloupce
Stačí však nastavit pouze šířku jednoho sloupce a nechat kolem něj automaticky měnit velikost sourozeneckých sloupců. Následující příklad vytvoří rozdělení 25%/50%/25%:
Příklad
<div class="row">
<div class="col">col</div>
<div class="col-6">col-6</div>
<div
class="col">col</div>
</div>
Více stejných sloupců
Příklad
<!-- Two equal columns -->
<div class="row">
<div class="col">1 of 2</div>
<div class="col">2 of 2</div>
</div>
<!-- Four equal columns -->
<div class="row">
<div class="col">1 of 4</div>
<div class="col">2 of 4</div>
<div class="col">3
of 4</div>
<div class="col">4 of 4</div>
</div>
<!-- Six equal columns -->
<div class="row">
<div class="col">1 of 6</div>
<div class="col">2 of 6</div>
<div class="col">3
of 6</div>
<div class="col">4 of 6</div>
<div class="col">5
of 6</div>
<div class="col">6 of 6</div>
</div>
Řádek Cols
Můžete také určit, kolik sloupců se má objevit vedle sebe (bez ohledu na to, kolik sloupců), pomocí .row-cols-*tříd:
Příklad
<div class="row row-cols-1">
<div class="col">1 of 2</div>
<div class="col">2 of 2</div>
</div>
<div class="row row-cols-2">
<div class="col">1 of 4</div>
<div class="col">2 of 4</div>
<div class="col">3
of 4</div>
<div class="col">4 of 4</div>
</div>
<div class="row row-cols-3">
<div class="col">1 of 6</div>
<div class="col">2 of 6</div>
<div class="col">3
of 6</div>
<div class="col">4 of 6</div>
<div class="col">5
of 6</div>
<div class="col">6 of 6</div>
</div>
Více nerovných sloupců
Příklad
<!-- Two Unequal
Columns -->
<div class="row">
<div class="col-8">1 of 2</div>
<div class="col-4">2 of 2</div>
</div>
<!-- Four Unequal Columns -->
<div class="row">
<div class="col-2">1 of 4</div>
<div class="col-2">2 of 4</div>
<div class="col-2">3
of 4</div>
<div class="col-6">4 of 4</div>
</div>
<!-- Setting two column widths -->
<div class="row">
<div class="col-4">1 of 4</div>
<div class="col-6">2 of 4</div>
<div class="col">3
of 4</div>
<div class="col">4 of 4</div>
</div>
Stejná výška
Pokud je jeden ze sloupců vyšší než druhý (kvůli výšce textu nebo CSS), zbytek bude následovat:
Příklad
<div class="row">
<div class="col">Lorem ipsum...</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
Vnořené sloupce
Následující příklad ukazuje, jak vytvořit rozložení se dvěma sloupci, s dalšími dvěma sloupci uvnitř jednoho ze sloupců:
Příklad
<div class="row">
<div class="col-8">
.col-8
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>
<div class="col-4">.col-4</div>
</div>
Responzivní třídy
Mřížkový systém Bootstrap 4 má pět tříd:
.col-(extra malá zařízení – šířka obrazovky menší než 576 pixelů).col-sm-(malá zařízení – šířka obrazovky 576 pixelů nebo větší).col-md-(střední zařízení – šířka obrazovky rovna nebo větší než 768 pixelů).col-lg-(velká zařízení – šířka obrazovky rovna nebo větší než 992 pixelů).col-xl-(xlarge zařízení - šířka obrazovky rovna nebo větší než 1200px)
Výše uvedené třídy lze kombinovat a vytvářet dynamičtější a flexibilnější rozvržení.
Tip: Každá třída se zvětšuje, takže pokud chcete nastavit stejné šířky pro
sma md, stačí zadat pouze sm.
Skládaný do vodorovné polohy
Následující příklad ukazuje, jak vytvořit rozvržení sloupců, které začíná naskládané na extra malých zařízeních, než se stane vodorovným na větších zařízeních (sm, md, lg a xl):
Příklad
<div class="row">
<div class="col-sm-9">col-sm-9</div>
<div class="col-sm-3">col-sm-3</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>
Mix and Match
Příklad
<!-- 50%/50% split on extra small devices and 75%/25% split on larger devices
-->
<div class="row">
<div class="col-6
col-sm-9">col-6 col-sm-9</div>
<div class="col-6
col-sm-3">col-6 col-sm-3</div>
</div>
<!-- 58%/42% split
on extra small, small and medium devices and 66.3%/33.3% split on large and
xlarge devices -->
<div class="row">
<div class="col-7 col-lg-8">col-7
col-lg-8</div>
<div class="col-5 col-lg-4">col-5
col-lg-4</div>
</div>
<!-- 25%/75% split on small devices, a 50%/50% split
on medium devices, and a 33%/66% split on large and xlarge devices. On extra
small devices, it will automatically stack (100%) -->
<div
class="row">
<div class="col-sm-3 col-md-6 col-lg-4">col-sm-3
col-md-6 col-lg-4</div>
<div class="col-sm-9 col-md-6
col-lg-8">col-sm-9 col-md-6 col-lg-8</div>
</div>
Žádné okapy
Přidejte .no-gutterstřídu do .rowkontejneru, abyste odstranili okapy (místo navíc):
Za účelem dosažení minima, kdo z nás by měl vykonávat jakékoli zaměstnání kromě využívání důsledků, které z toho plynou.
Příklad
<div class="row no-gutters">