Siatka Bootstrap 5: XXL

Przykład siatki urządzeń XXL

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

Urządzenia XXL zdefiniowane są jako mające 1400 pikseli i więcejszerokość ekranu.

Podany przykład spowoduje 50/50% podział na urządzenia średnie, duże i ultra duże, na urządzeniach XXL spowoduje 25/75% podział.

Przykład

<div class="container-fluid">
  <div class="row">
    <div class="col-md-6 col-xxl-3">
      <p>Światowy Fundusz Na rzecz Natury (WWF), założony 29 kwietnia 1961 roku, jego logo to panda ...</p>
    </div>
    <div class="col-md-6 col-xxl-9">
      <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 zawsze wynosi 12.

używając tylko XXL

w przykładzie, zdefiniowaliśmy tylko .col-xxl-6 klasy (bez .col-md-* i/lub .col-sm-*）。Oznacza to, że urządzenia xxlarge będą dzielić się na 50/50%. Jednak dla urządzeń ultra-dużych, dużych, średnich, małych i ultra-małych będą wertykalnie ułożone (szerokość 100%):

Przykład

<div class="container-fluid">
  <div class="row">
    <div class="col-xxl-6">
      <p>Światowy Fundusz Na rzecz Natury (WWF), założony 29 kwietnia 1961 roku, jego logo to panda ...</p>
    </div>
    <div class="col-xxl-6">
      <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 na utworzenie równo szerokich kolumn na wszystkich urządzeniach: po prostu od .col-xxl-* Usuń liczby i używaj tylko na elemencie col .col-xxl Klasa. Bootstrap rozpozna liczbę kolumn i każda z nich będzie miała tę samą szerokość.

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

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

Spróbuj sam