Bootstrap 5 gitter: XXL

XXL enhedsgittereksempel

XSmall Small Medium Large Extra Large XXL
klassedefinererpræfiks .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
skærmens bredde <576px >=576px >=768px >=992px >=1200px >=1400px

XXL-enheder defineres som enheder med 1400 pixels og højereskærmens bredde.

Følgende eksempel vil opdele 50/50% på mellemstore, store og ekstra store enheder, og 25/75% på XXL-enheder. På små og ekstra små enheder vil det automatisk stille sig (100%):

eksempel

<div class="container-fluid">
  <div class="row">
    <div class="col-md-6 col-xxl-3">
      <p>World Wide Fund for Nature (WWF), stiftet den 29. april 1961, har som symbol et panda...</p>
    </div>
    <div class="col-md-6 col-xxl-9">
      <p>1980, WWF kom officielt til Kina, inviteret af den kinesiske regering til at udføre beskyttelsesarbejde for pandaen og dens levested...</p>
    </div>
  </div>
</div>

Prøv det selv

Bemærk:sørg for, at summen altid er 12.

kun brug af XXL

i dette eksempel har vi kun specificeret .col-xxl-6 klassen (uden .col-md-* og / eller .col-sm-*）。 Dette betyder, at xxlarge-enheder vil opdeles i 50/50%. Men for ekstrastor, stor, mellem, lille og ekstrasmal enheder vil de stå lodret stakket (100% bredde):

eksempel

<div class="container-fluid">
  <div class="row">
    <div class="col-xxl-6">
      <p>World Wide Fund for Nature (WWF), stiftet den 29. april 1961, har som symbol et panda...</p>
    </div>
    <div class="col-xxl-6">
      <p>1980, WWF kom officielt til Kina, inviteret af den kinesiske regering til at udføre beskyttelsesarbejde for pandaen og dens levested...</p>
    </div>
  </div>
</div>

Prøv det selv

automatisk layoutkolonner

i Bootstrap 5 er der en enkel måde at oprette ens brede kolonner til alle enheder: simpelthen fra .col-xxl-* fjern tallene, og brug kun på col-elementerne .col-xxl klassen. Bootstrap vil identificere antallet af kolonner, og hver kolonne vil få samme bredde.

hvis skærmstørrelsenmindre end 1400pxkolonnerne vil ligge vandret stakket:

<!-- To kolonner: på devices over ekstrastor er bredden 50% -->
<div class="row">
  <div class="col-xxl">1 af 2</div>
  <div class="col-xxl">2 af 2</div>
</div>
<!-- Fire kolonner: på devices over ekstrastor er bredden 25% -->
<div class="row">
  <div class="col-xxl">1 af 4</div>
  <div class="col-xxl">2 af 4</div>
  <div class="col-xxl">3 af 4</div>
  <div class="col-xxl">4 af 4</div>
</div>

Prøv det selv