Bootstrap 5 gitter: små enheder

Små enheder gittereksempel

XSmall Small Medium Large Extra Large XXL
klassetilføjelse .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
skærmbredde <576px >=576px >=768px >=992px >=1200px >=1400px

Antag, at vi har en simpel to-kolonne layout. For små enheder ønsker vi at opdele kolonnerne 25% / 75%.

Små enheder defineres som skærmens breddeFra 576 pixel til 767 pixel

For små enheder vil vi bruge .col-sm-* klasser.

Vi tilføjer følgende klasser til to kolonner:

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

Følgende eksempel vil oprette en 25% / 75% opdeling på små (og mellemstore, store, ekstra store og gigantiske) enheder. På ekstra små enheder vil det automatisk staples (100%):

Eksempel

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 bg-primary">
      <p>World Wide Fund for Nature (WWF), grundlagt den 29. april 1961, har et panda som sit symbol...</p>
    </div>
    <div class="col-sm-9 bg-dark">
      <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 er 12 eller mindre (du behøver ikke bruge alle 12 tilgængelige kolonner):

For 33.3% / 66.6% opdeling, skal du bruge .col-sm-4 og .col-sm-8(For 50% / 50% opdeling, skal du bruge .col-sm-6 og .col-sm-6):

Eksempel

<!-- 33.3/66.6% split: -->
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-4 bg-primary">
      <p>World Wide Fund for Nature (WWF), grundlagt den 29. april 1961, har et panda som sit symbol...</p>
    </div>
    <div class="col-sm-8 bg-dark">
      <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>
<!-- 50%/50% split: -->
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6 bg-primary">
      <p>World Wide Fund for Nature (WWF), grundlagt den 29. april 1961, har et panda som sit symbol...</p>
    </div>
    <div class="col-sm-6 bg-dark">
      <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 ensbredde kolonner til alle enheder: bare fra .col-sm-* fjernes tal, og kun col elementbruges .col-sm klassen. Bootstrap vil genkende antallet af kolonner, og hver kolonne vil få samme bredde.

hvis skærmstørrelsenmindre end 576pxkolonner vil være vandret stak:

<!-- To kolonner: 50% bredde på alle skærme, undtagen ekstremt små enheder (100% bredde) -->
<div class="row">
  <div class="col-sm">1 af 2</div>
  <div class="col-sm">2 af 2</div>
</div>
<!-- Fire kolonner: 25% bredde på alle skærme, undtagen ekstremt små enheder (100% bredde) -->
<div class="row">
  <div class="col-sm">1 af 4</div>
  <div class="col-sm">2 af 4</div>
  <div class="col-sm">3 af 4</div>
  <div class="col-sm">4 af 4</div>
</div>

Prøv det selv

Næste kapitel vil vise, hvordan man tilføjer forskellige opdelt procentdel til mellemstore enheder.