Bootstrap 5 gitter: små enheder
- Forrige side BS5 gitter XSmall
- Næste side BS5 gitter Medium
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>
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>
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>
Næste kapitel vil vise, hvordan man tilføjer forskellige opdelt procentdel til mellemstore enheder.
- Forrige side BS5 gitter XSmall
- Næste side BS5 gitter Medium