Bootstrap 5 Gitter: Ekstremt Store Enheder

Store enheder netværks eksempel

XSmall Small Medium Large Extra Large XXL
Klassepræfiks .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
Skærmbredde <576px >=576px >=768px >=992px >=1200px >=1400px

I det forrige kapitel viste vi et netværks eksempel, der indeholder klasser til små, mellemstore og store enheder. Vi brugte to div'er (kolonner) og foretog en 25%/75% opdeling på små enheder, en 50%/50% opdeling på mellemstore enheder og en 33%/66% opdeling på store enheder:

<div class="col-sm-3 col-md-6 col-lg-4">....</div>
<div class="col-sm-9 col-md-6 col-lg-8">....</div>

Men på xlarge-enheder kan et design med 20% / 80% opdeling være bedre.

Store enheder defineres som skærmbredde på 1200 pixel og derover

For xlarge-enheder vil vi bruge .col-xl-* Klasse:

<div class="col-sm-3 col-md-6 col-lg-4 col-xl-2">....</div>
<div class="col-sm-9 col-md-6 col-lg-8 col-xl-10">....</div>

Følgende eksempel vil føre til opdeling i 25%/75% på små enheder, 50%/50% på mellemstore enheder, 33%/66% på store enheder samt 20%/80% opdeling på xlarge og xxlarge enheder. På ekstremt små enheder vil det automatisk stille sig op (100%):

Eksempel

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 col-md-6 col-lg-4 col-xl-2">
      <p>World Wide Fund for Nature (WWF), grundlagt den 29. april 1961, har pandaen som sit symbol...</p>
    </div>
    <div class="col-sm-9 col-md-6 col-lg-8 col-xl-10">
      <p>1980, WWF kom officielt til Kina, inviteret af den kinesiske regering til at udføre beskyttelsesarbejde for pandaer og deres levesteder...</p>
    </div>
  </div>
</div>

Prøv det selv

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

brug kun XLarge

i nedenstående eksempel specificerer vi kun .col-xl-6 klasser (uden .col-lg-*,.col-md-* og/eller .col-sm-*)。 Dette betyder, at xlarge og xxlarge enheder vil blive opdelt i 50/50%. Men for store, mellemstore, små og ekstra små enheder vil de blive placeret lodret (100% bredde):

Eksempel

<div class="container-fluid">
  <div class="row">
    <div class="col-xl-6">
      <p>World Wide Fund for Nature (WWF), grundlagt den 29. april 1961, har pandaen som sit symbol...</p>
    </div>
    <div class="col-xl-6">
      <p>1980, WWF kom officielt til Kina, inviteret af den kinesiske regering til at udføre beskyttelsesarbejde for pandaer og deres levesteder...</p>
    </div>
  </div>
</div>

Prøv det selv

automatisk layout kolonner

i Bootstrap 5 findes der en simpel måde at oprette ensbreddede kolonner for alle enheder: bare fra .col-xl-* fjern tallene og brug kun på col-elementet .col-xl klassen. Bootstrap vil identificere antallet af kolonner, og hver kolonne vil få samme bredde.

hvis skærmstørrelsenmindre end 1200pxkolonnerne vil blive placeret vandret:

<!-- To kolonner: på enheder over ultra-stor er 50% bredde -->
<div class="row">
  <div class="col-xl">1 af 2</div>
  <div class="col-xl">2 af 2</div>
</div>
<!-- Fire kolonner: på enheder over ultra-stor er 25% bredde -->
<div class="row">
  <div class="col-xl">1 af 4</div>
  <div class="col-xl">2 af 4</div>
  <div class="col-xl">3 af 4</div>
  <div class="col-xl">4 af 4</div>
</div>

Prøv det selv