Siatka: małe urządzenia Bootstrap 5

Przykład siatki małych urządzeń

XSmall Small Medium Large Extra Large XXL
przedrostek klasy .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
szerokość ekranu <576px >=576px >=768px >=992px >=1200px >=1400px

Załóżmy, że mamy prosty układ z dwoma kolumnami. Dla małych urządzeń chcemy podzielić kolumny w proporcji 25% / 75%.

Małe urządzenia są zdefiniowane jako szerokość ekranuod 576 pikseli do 767 pikseli。

Dla małych urządzeń użyjemy .col-sm-* klasy.

Dodamy następujące klasy do dwóch kolumn:

<div class="col-sm-3">....</div>
<div class="col-sm-9">....</div>

Poniższy przykład spowoduje podział 25% / 75% na małych (oraz średnich, dużych, ultra dużych i extra dużych) urządzeniach. Na urządzeniach extra małych automatycznie się układa (100%):

Przykład

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 bg-primary">
      <p>World Wide Fund for Nature (WWF), założony 29 kwietnia 1961 roku, jego logo to panda ...</p>
    </div>
    <div class="col-sm-9 bg-dark">
      <p>W 1980 roku WWF oficjalnie przyszedł do Chin, został zaproszony przez rząd chiński, aby przeprowadzić pracę nad ochroną pandy i jej siedliska ...</p>
    </div>
  </div>
</div>

Spróbuj sam

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

Dla podziału 33.3% / 66.6% powinieneś użyć .col-sm-4 i .col-sm-8Dla podziału 50% / 50% powinieneś użyć .col-sm-6 i .col-sm-6)：

Przykład

33.3/66.6% podział: -->
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-4 bg-primary">
      <p>World Wide Fund for Nature (WWF), założony 29 kwietnia 1961 roku, jego logo to panda ...</p>
    </div>
    <div class="col-sm-8 bg-dark">
      <p>W 1980 roku WWF oficjalnie przyszedł do Chin, został zaproszony przez rząd chiński, aby przeprowadzić pracę nad ochroną pandy i jej siedliska ...</p>
    </div>
  </div>
</div>
<!-- Podział 50/50: -->
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6 bg-primary">
      <p>World Wide Fund for Nature (WWF), założony 29 kwietnia 1961 roku, jego logo to panda ...</p>
    </div>
    <div class="col-sm-6 bg-dark">
      <p>W 1980 roku WWF oficjalnie przyszedł do Chin, został zaproszony przez rząd chiński, aby przeprowadzić pracę nad ochroną pandy i jej siedliska ...</p>
    </div>
  </div>
</div>

Spróbuj sam

automatyczne układanie kolumn

w Bootstrap 5 istnieje prosty sposób tworzenia równo szerokich kolumn dla wszystkich urządzeń: wystarczy od .col-sm-* usuń liczby i używaj tylko elementy colużywana .col-sm klasa. Bootstrap rozpozna liczbę kolumn i każda z nich będzie miała tę samą szerokość.

Jeśli rozmiar ekranuMniej niż 576px, kolumny będą układane poziomo:

<!-- Dwie kolumny: szerokość 50% na wszystkich ekranach, oprócz urządzeń extra-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ń extra-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

Następny rozdział pokaże, jak dodać różne procenty rozkładu dla urządzeń średnich.