Siatka Bootstrap 5: urządzenia o bardzo dużych rozmiarach

Przykład siatki dużej maszyny

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

W poprzednim rozdziale pokazaliśmy przykład siatki, która zawiera klasy odpowiednie dla małych, średnich i dużych urządzeń. Użyliśmy dwóch divów (kolumn) i na małych urządzeniach wykonaliśmy podział 25%/75%, na urządzeniach średnich 50%/50%, na dużych 33%/66%:

<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 urządzeniach xlarge projekt podziału 20% / 80% może być lepszy.

Duże urządzenia są zdefiniowane jako szerokość ekranu 1200 pikseli i więcej.

Dla urządzeń xlarge użyjemy: .col-xl-* Klasa:

<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ł na 25%/75% na małych urządzeniach, 50%/50% na urządzeniach średnich, 33%/66% na dużych urządzeniach oraz na xlarge i xxlarge 20%/80% urządzeń. Na bardzo małych urządzeniach, automatycznie będzie się układać (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>Światowy Związek Ochrony Natury (WWF), założony 29 kwietnia 1961 roku, jego logo to pingwin ...</p>
    </div>
    <div class="col-sm-9 col-md-6 col-lg-8 col-xl-10">
      <p>W 1980 roku WWF oficjalnie przyszedł do Chin, został zaproszony przez rząd chiński, aby prowadzić ochronę pingwina i jego siedliska ...</p>
    </div>
  </div>
</div>

Spróbuj sam

Uwaga:upewnij się, że suma zawsze wynosi 12.

używaj tylko XLarge

w poniższym przykładzie, określamy tylko .col-xl-6 klasy (bez .col-lg-*,.col-md-* i/lub .col-sm-*）。Oznacza to, że urządzenia xlarge i xxlarge będą dzielić się na 50%/50%. Jednak dla urządzeń large, medium, small i extra small będą wertykalnie układane (szerokość 100%):

Przykład

<div class="container-fluid">
  <div class="row">
    <div class="col-xl-6">
      <p>Światowy Związek Ochrony Natury (WWF), założony 29 kwietnia 1961 roku, jego logo to pingwin ...</p>
    </div>
    <div class="col-xl-6">
      <p>W 1980 roku WWF oficjalnie przyszedł do Chin, został zaproszony przez rząd chiński, aby prowadzić ochronę pingwina i jego siedliska ...</p>
    </div>
  </div>
</div>

Spróbuj sam

automatyczne układanie kolumn

w Bootstrap 5 istnieje prosty sposób na utworzenie równo szerokich kolumn na wszystkich urządzeniach: wystarczy od .col-xl-* usuń liczby i używaj tylko na elemencie col .col-xl klasa. Bootstrap rozpozna liczbę kolumn i każda kolumna będzie miała tę samą szerokość.

jeśli rozmiar ekranuponiżej 1200px, kolumny będą układane poziomo:

<!-- Dwie kolumny: na urządzeniach powyżej super large są szerokie na 50% -->
<div class="row">
  <div class="col-xl">1 z 2</div>
  <div class="col-xl">2 z 2</div>
</div>
<!-- Cztery kolumny: na urządzeniach powyżej super large są szerokie na 25% -->
<div class="row">
  <div class="col-xl">1 z 4</div>
  <div class="col-xl">2 z 4</div>
  <div class="col-xl">3 z 4</div>
  <div class="col-xl">4 z 4</div>
</div>

Spróbuj sam