Siatka Bootstrap 5: od układania się do poziomego

Przykład siatki: układ poziomy

Stwórzmy podstawowy system siatki, który zaczyna się od układania się na urządzeniach extra-małych, a następnie staje się poziomy na większych urządzeniach.

Poniższy przykład pokazuje prosty układ dwukolumnowy "poziomy", co oznacza, że na wszystkich ekranach będzie generował 50%/50% podział, oprócz ekranów extra-małych, które będą automatycznie układać się (100%):

Przykład: układ poziomy

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6 bg-primary">
      <p>Kolumna 1 ...</p>
    </div>
    <div class="col-sm-6 bg-dark">
      <p>Kolumna 2 ...</p>
    </div>
  </div>
</div>

Spróbuj sam

Wskazówka:.col-sm-* liczby w klasach oznaczają, ile kolumn div powinien przekraczać (łącznie 12 kolumn). Więc,.col-sm-1 przekraczające 1 kolumnę.col-sm-4 przekraczające 4 kolumny.col-sm-6 przekraczające 6 kolumn, itd.

Uwaga:upewnij się, że suma wynosi lub jest mniejsza niż 12 (nie musisz używać wszystkich 12 dostępnych kolumn):

Wskazówka:przez .container-fluid na .containermożesz zmienić każdą klasę szerokość pełna układ przekształca się w szerokość stała układ responsywny:

Przykład: responsywny kontener

<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <p>Kolumna 1 ...</p>
    </div>
    <div class="col-sm-6">
      <p>Kolumna 2 ...</p>
    </div>
  </div>
</div>

Spróbuj sam

automatyczne układy kolumn

w Bootstrap 5 istnieje prosty sposób, aby utworzyć równe kolumny dla wszystkich urządzeń: po prostu usuń .col-size-* usuń liczby i używaj tylko na elemencie col .col-size Klasy. Bootstrap rozpoznaje liczbę kolumn i każda kolumna otrzymuje tę samą szerokość. Klasy rozmiaru (sm, md itp.) określają, kiedy kolumny powinny być responsywne:

<!-- Dwie kolumny: szerokość 50% na wszystkich ekranach, oprócz urządzeń ultra-małych (szerokość 100%) -->
<div class="row">
  <div class="col-sm">1 z 2</div>
  <div class="col-sm">2 z 2</div>
</div>
<!-- Cztery kolumny: szerokość 25% na wszystkich ekranach, oprócz urządzeń ultra-małych (szerokość 100%) -->
<div class="row">
  <div class="col-sm">1 z 4</div>
  <div class="col-sm">2 z 4</div>
  <div class="col-sm">3 z 4</div>
  <div class="col-sm">4 z 4</div>
</div>

Spróbuj sam