Bootstrap 5 Gitter: Store Enheder

Kursusforslag:

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

I det forrige kapitel viste vi et gittereksempel med klasser til små og mellemstore enheder. Vi brugte to div'er (kolonner) og opdelte 25%/75% på små enheder og 50%/50% på mellemstore enheder:

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

Men en 33% / 66% opdeling kan være bedre på store enheder.

Store enheder defineres som skærmbreddefra 992 pixel til 1199 pixel。

For store enheder vil vi bruge .col-lg-* Klasser:

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

På små enheder skal du bruge klassen -sm- klassen. På mellemstore enheder skal du bruge klassen -md- klassen. På store enheder skal du bruge klassen -lg- klassen.

Eksemplet vil føre til opdeling af 25%/75% på små enheder, 50%/50% på mellemstore enheder og 33%/66% på store, 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">
      <p>World Wide Fund for Nature (WWF), grundlagt den 29. april 1961, har pandaen som sit logo...</p>
    </div>
    <div class="col-sm-9 col-md-6 col-lg-8">
      <p>1980, WWF kom officielt til Kina, blev 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 er lig med eller mindre end 12 (du behøver ikke at bruge alle 12 tilgængelige kolonner):

brug kun Large

i nedenstående eksempel, angiver vi kun .col-lg-6 klasser (uden .col-md-* og/eller .col-sm-*）。Dette betyder, at store, xstore og xxstore enheder vil blive delt 50/50%. Men for mellemstore, små og ekstra små enheder vil de blive stående lodret (100% bredde):

Eksempel

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-6">
      <p>World Wide Fund for Nature (WWF), grundlagt den 29. april 1961, har pandaen som sit logo...</p>
    </div>
    <div class="col-lg-6">
      <p>1980, WWF kom officielt til Kina, blev 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 findes der en simpel metode til at oprette ens brede kolonner for alle enheder: bare fra .col-lg-* fjern tallene og brug kun på col-elementet .col-lg klasser. Bootstrap vil identificere antallet af kolonner, og hver kolonne vil få samme bredde.

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

<!-- To kolonner: På store og større enheder er bredden 50% -->
<div class="row">
  <div class="col-lg">1 af 2</div>
  <div class="col-lg">2 af 2</div>
</div>
<!-- Fire kolonner: På store og større enheder er bredden 25% -->
<div class="row">
  <div class="col-lg">1 af 4</div>
  <div class="col-lg">2 af 4</div>
  <div class="col-lg">3 af 4</div>
  <div class="col-lg">4 af 4</div>
</div>

Prøv det selv