Bootstrap 5-grid: XXL

XXL-enhetsnätverksinstans

XSmall Small Medium Large Extra Large XXL
klassprefiks .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
skärmens bredd <576px >=576px >=768px >=992px >=1200px >=1400px

XXL-enheter definieras som 1400 pixlar och högreskärmens bredd.

Exempelvis kommer detta att skapa en delning av 50/50 på medium, stor och extra stor utrustning, och en delning av 25/75 på XXL-utrustning. På små och extra små enheter kommer det att staplas automatiskt (100%):

Exempel

<div class="container-fluid">
  <div class="row">
    <div class="col-md-6 col-xxl-3">
      <p>World Wide Fund for Nature (WWF), grundad den 29 april 1961, med en pandor som logotyp...</p>
    </div>
    <div class="col-md-6 col-xxl-9">
      <p>1980, WWF kom officiellt till Kina, inbjuden av den kinesiska regeringen för att genomföra skydd av pandor och deras livsmiljö...</p>
    </div>
  </div>
</div>

Prova själv

Observera:Se till att summan alltid är 12.

endast använda XXL

i följande exempel specificerar vi endast .col-xxl-6 klasser (ingen .col-md-* och / eller .col-sm-*）。Detta innebär att xxlarge-enheter kommer att delas 50/50%. Men för extra stor, stor, medium, liten och extra liten enheter kommer de att stå vertikalt (100% bredd):

Exempel

<div class="container-fluid">
  <div class="row">
    <div class="col-xxl-6">
      <p>World Wide Fund for Nature (WWF), grundad den 29 april 1961, med en pandor som logotyp...</p>
    </div>
    <div class="col-xxl-6">
      <p>1980, WWF kom officiellt till Kina, inbjuden av den kinesiska regeringen för att genomföra skydd av pandor och deras livsmiljö...</p>
    </div>
  </div>
</div>

Prova själv

Automatisk layout av kolumner

I Bootstrap 5 finns det ett enkelt sätt att skapa likabreda kolumner för alla enheter: bara från .col-xxl-* Ta bort siffrorna och använd endast på col-elementen .col-xxl Klasser. Bootstrap kommer att känna igen hur många kolumner som finns, och varje kolumn kommer att få samma bredd.

Om skärmstorlekenMindre än 1400px，kolumnerna kommer att ligga horisontellt:

<!-- Två kolumner: på enheter som är stor eller större är bredden 50% -->
<div class="row">
  <div class="col-xxl">1 av 2</div>
  <div class="col-xxl">2 av 2</div>
</div>
<!-- Fyra kolumner: på enheter som är stor eller större är bredden 25% -->
<div class="row">
  <div class="col-xxl">1 av 4</div>
  <div class="col-xxl">2 av 4</div>
  <div class="col-xxl">3 av 4</div>
  <div class="col-xxl">4 av 4</div>
</div>

Prova själv