Siatka Bootstrap 4 Ułożona w stos w poziomie
Przykład siatki Bootstrap 4: Ułożone w poziomie
Stworzymy podstawowy system siatek, który zaczyna się na dodatkowych małych urządzeniach, a następnie staje się poziomy na większych urządzeniach.
Poniższy przykład pokazuje prosty układ dwukolumnowy „ułożony w poziome”, co oznacza, że spowoduje podział 50%/50% na wszystkich ekranach, z wyjątkiem bardzo małych ekranów, które zostaną automatycznie ustawione w stos (100%):
Przykład: Ułożone w poziomie
<div class="container">
<div class="row">
<div class="col-sm-6 bg-success">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-6 bg-warning">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
Wskazówka: liczby w .col-sm-*klasach wskazują, ile kolumn powinien obejmować div (z 12). Tak więc .col-sm-1obejmuje 1 kolumnę, .col-sm-4obejmuje 4 kolumny,
.col-sm-6obejmuje 6 kolumn itd.
Uwaga:
Upewnij się, że suma nie przekracza 12 (nie jest wymagane użycie wszystkich 12 dostępnych kolumn):
Wskazówka: możesz zmienić dowolny układ o stałej szerokości w układ o pełnej szerokości , zmieniając .containerklasę na .container-fluid:
Przykład: pojemnik na płyn
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-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ń: wystarczy usunąć numer z i użyć klasy tylko na określonej liczbie
elementów col . Bootstrap rozpozna, ile jest kolumn, a każda kolumna otrzyma taką samą szerokość. Klasy wielkości określają, kiedy kolumny powinny być responsywne:.col-size-*.col-size
<!-- Two columns: 50% width on all screens, except for extra small (100%
width) -->
<div class="row">
<div class="col-sm">1 of
2</div>
<div class="col-sm">2 of 2</div>
</div>
<!-- Four
columns: 25% width on all screens, except for extra small (100% width)-->
<div class="row">
<div class="col-sm">1 of 4</div>
<div class="col-sm">2 of 4</div>
<div class="col-sm">3
of 4</div>
<div class="col-sm">4 of 4</div>
</div>