Bootstrap 5 verkko: XXL

XXL laiteverkkoesimerkki

XSmall Small Medium Large Extra Large XXL
luokan etuliite .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
näytön leveys <576px >=576px >=768px >=992px >=1200px >=1400px

XXL-laitteet määritellään 1400 pikseliä tai enemmännäytön leveys.

Esimerkki tuottaa 50/50 jakautumisen keskikokoisilla, suurilla ja erittäin suurilla laitteilla, XXL-laitteilla 25/75 jakautumisen.

Esimerkki

<div class="container-fluid">
  <div class="row">
    <div class="col-md-6 col-xxl-3">
      <p>World Wide Fund for Nature (WWF), perustettu 29. huhtikuuta 1961, tunnus on suurpekka...</p>
    </div>
    <div class="col-md-6 col-xxl-9">
      <p>1980-luvulla WWF tuli virallisesti Kiinaan, kutsuttiin Kiinan hallituksen toimesta Kiinaan ja aloitti suojelutyön suurpekkejä ja niiden elinympäristöjä...</p>
    </div>
  </div>
</div>

Kokeile itse

Huomaa:Varmista, että summa on aina 12.

Vain XXL

Esimerkissä meillä on vain .col-xxl-6 luokat (ei .col-md-* ja / tai .col-sm-*）。Tämä tarkoittaa, että xxlarge-laitteet jaetaan 50/50%. Mutta suurissa, keskisuurissa, pienissä ja erittäin pienissä laitteissa ne sijoitetaan pystysuoraan (100% leveys):

Esimerkki

<div class="container-fluid">
  <div class="row">
    <div class="col-xxl-6">
      <p>World Wide Fund for Nature (WWF), perustettu 29. huhtikuuta 1961, tunnus on suurpekka...</p>
    </div>
    <div class="col-xxl-6">
      <p>1980-luvulla WWF tuli virallisesti Kiinaan, kutsuttiin Kiinan hallituksen toimesta Kiinaan ja aloitti suojelutyön suurpekkejä ja niiden elinympäristöjä...</p>
    </div>
  </div>
</div>

Kokeile itse

Automaattinen asettelu sarjoille

Bootstrap 5:ssä on yksinkertainen tapa luoda kaikille laitteille yhtä leveät sarjat: riittää, kun poistat .col-xxl-* Poista numerot ja käytä vain col-elementillä .col-xxl Luokka. Bootstrap tunnistaa kuinka monta sarjaa on, ja jokainen sarja saa saman leveyden.

Jos näyttökokoaalle 1400pxSarakkeet sijoitetaan horisontaalisesti:

<!-- Kaksi sarjaa: suurissa ja suuremmissa laitteissa leveys on 50% -->
<div class="row">
  <div class="col-xxl">1 of 2</div>
  <div class="col-xxl">2 of 2</div>
</div>
<!-- Neljä sarjaa: suurissa ja suuremmissa laitteissa leveys on 25% -->
<div class="row">
  <div class="col-xxl">1 of 4</div>
  <div class="col-xxl">2 of 4</div>
  <div class="col-xxl">3 of 4</div>
  <div class="col-xxl">4 of 4</div>
</div>

Kokeile itse