Siatka Bootstrap 4 — bardzo duża
Przykład dużej siatki
| 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 |
W poprzednim rozdziale przedstawiliśmy przykład siatki z klasami dla małych i średnich urządzeń. Użyliśmy dwóch divów (kolumn) i daliśmy im podział 25%/75% na małych urządzeniach i 50%/50% na średnich urządzeniach i 33%/66% na dużych urządzeniach:
<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 dużych urządzeniach projekt może być lepszy jako podział 20%/80%.
Bardzo duże urządzenia są definiowane jako urządzenia o szerokości ekranu od 1200 pikseli i większej .
Dla urządzeń XL użyjemy .col-xl-*klas:
<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>
Poniższy przykład spowoduje podział 25%/75% na małych urządzeniach, 50%/50% na średnich urządzeniach oraz 33%/66% na dużych i 20%/80% na dużych urządzeniach. Na bardzo małych urządzeniach automatycznie układa się w stos (100%):
Przykład
<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>
Uwaga: Upewnij się, że suma zawsze sumuje się do 12.
Korzystanie tylko z XLarge
W poniższym przykładzie określamy tylko .col-xl-6klasę (bez .col-lg-*, .col-md-*i/lub .col-sm-*). Oznacza to, że bardzo duże urządzenia podzielą 50%/50%. Jednak w przypadku dużych, średnich, małych ORAZ bardzo małych urządzeń będzie się układać pionowo (100% szerokości):
Przykład
<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>
Kolumny z automatycznym układem
W Bootstrap 4 istnieje prosty sposób na utworzenie kolumn o równej szerokości dla wszystkich urządzeń: po prostu usuń liczbę z .col-xl-*i użyj .col-xlklasy tylko na określonej liczbie
elementów col . Bootstrap rozpozna, ile jest kolumn, a każda kolumna otrzyma taką samą szerokość.
Jeśli rozmiar ekranu jest mniejszy niż 1200 pikseli , kolumny zostaną ułożone poziomo:
<!-- 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>