Bootstrap 5 gitter: XXL
- Forrige side BS5 gitter XLarge
- Næste side BS5 gittereksempel
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>
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>
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>
- Forrige side BS5 gitter XLarge
- Næste side BS5 gittereksempel