Bootstrap 5 Gitter: Mellemstore enheder

Mellemstore enhed netværks eksempel

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

I det foregående kapitel viste vi et netværks eksempel, der indeholder klasser til små enheder. Vi brugte to div'er (kolonner) og gav dem en opdeling på 25% / 75%:

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

Men en opdeling på 50% / 50% kan være bedre på mellemstore enheder.

Mellemstore enheder defineres som skærmbreddeFra 768 pixels til 991 pixels.

For mellemstore enheder vil vi bruge .col-md-* Klasser:

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

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

Følgende eksempel vil føre til en opdeling på 25% / 75% på små enheder og en opdeling på 50% / 50% på mellemstore (og store, store og ekstra store) enheder. På ekstra 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">
      <p>World Wide Fund for Nature (WWF), stiftet den 29. april 1961, har som symbol et stort panda ...</p>
    </div>
    <div class="col-sm-9 col-md-6">
      <p>1980, WWF kom officielt til Kina, inviteret af den kinesiske regering til at udføre beskyttelsesarbejde for store pandaer og deres levesteder ...</p>
    </div>
  </div>
</div>

Prøv det selv

Bemærk:Sørg for, at summen er 12 eller mindre (brug ikke alle 12 tilgængelige kolonner):

Kun Medium

I dette eksempel har vi kun specificeret .col-md-6 Klasser (uden .col-sm-*）。Dette betyder, at mellemstore, store, ekstra store og XXL-enheder vil opdeles i 50% / 50% - fordi klassen udvider. Men for små og ekstra små enheder vil de stables lodret (100% bredde):

Eksempel

<div class="row">
  <div class="col-md-6">
    <p>World Wide Fund for Nature (WWF), stiftet den 29. april 1961, har som symbol et stort panda ...</p>
  </div>
  <div class="col-md-6">
    <p>1980, WWF kom officielt til Kina, inviteret af den kinesiske regering til at udføre beskyttelsesarbejde for store pandaer og deres levesteder ...</p>
  </div>
</div>

Prøv det selv

Automatisk layoutkolonner

I Bootstrap 5 er der en simpel måde at oprette ens breddede kolonner for alle enheder på: bare fra .col-md-* Fjern talene og brug kun .col-md Klasser. Bootstrap vil genkende antallet af kolonner, og hver kolonne vil få samme bredde.

Hvis skærmstørrelsenMindre end 768pxKolonnerne vil horizontalt stables:

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

Prøv det selv

Næste kapitel viser, hvordan man tilføjer forskellige opdelt procentdele til store enheder.