Bootstrap 4 Siatka bardzo mała
Przykład bardzo mał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 |
Załóżmy, że mamy prosty układ z dwiema kolumnami. Chcemy, aby kolumny podzieliły 25%/75% na WSZYSTKIE urządzenia.
Do naszych dwóch kolumn dodamy następujące klasy:
<div class="col-3">....</div>
<div class="col-9">....</div>
Poniższy przykład spowoduje podział 25%/75% na wszystkie urządzenia (bardzo małe, małe, średnie, duże i bardzo duże).
Przykład
<div class="container-fluid">
<div class="row">
<div class="col-3 bg-success">
<p>Lorem ipsum...</p>
</div>
<div class="col-9 bg-warning">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
Uwaga: Upewnij się, że suma nie przekracza 12 (nie jest wymagane użycie wszystkich 12 dostępnych kolumn):
W przypadku podziału 33,3%/66,6% użyłbyś .col-4i .col-8(a dla podziału 50%/50% użyłbyś .col-6i .col-6):
Przykład
<!-- 33.3%/66.6% split -->
<div class="container-fluid">
<div class="row">
<div class="col-4 bg-success">
<p>Lorem ipsum...</p>
</div>
<div class="col-8 bg-warning">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
<!-- 50%/50% split -->
<div class="container-fluid">
<div class="row">
<div class="col-6 bg-success">
<p>Lorem ipsum...</p>
</div>
<div class="col-6 bg-warning">
<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ń: wystarczy usunąć numer z .col-*i użyć .colklasy tylko na określonej liczbie
elementów col . Bootstrap rozpozna, ile jest kolumn, a każda kolumna otrzyma taką samą szerokość:
<!-- Two columns: 50% width-->
<div class="row">
<div class="col">1 of
2</div>
<div class="col">2 of 2</div>
</div>
<!-- Four
columns: 25% width-->
<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>
W następnym rozdziale pokazano, jak dodać inny procent podziału dla małych urządzeń.