Bootstrap 5 Gitter eksempel
- Forrige side BS5 gitter XXL
- Næste side BS5 grundlæggende skabelon
Her har vi samlet nogle eksempler på Bootstrap 5's rutenetværkslayout.
Tre kolonner opdelt i tre lige dele
Brug på et bestemt antal elementer .col Klasser, Bootstrap vil genkende antallet af elementer (og oprette kolonner med samme bredde). I nedenstående eksempel brugte vi tre col-elementer, hvor hver elementbredde er 33.33%%.
Eksempel
<div class="row"> <div class="col">col</div> <div class="col">col</div> <div class="col">col</div> </div>
Tre ens kolonner med tal
Du kan også bruge tal til at kontrollere kolonnebredden. Sørg for, at summen er lig eller mindre end 12 (du behøver ikke at bruge alle 12 tilgængelige kolonner):
Eksempel
<div class="row"> <div class="col-4">col-4</div> <div class="col-4">col-4</div> <div class="col-4">col-4</div> </div>
Tre forskellige kolonner
For at oprette forskellige kolonner skal du bruge tal. Eksemplet vil oprette en opdeling på 25%/50%/25%:
Eksempel
<div class="row"> <div class="col-3">col-3</div> <div class="col-6">col-6</div> <div class="col-3">col-3</div> </div>
Sæt bredde på én kolonne
Selvom det kun er nødvendigt at sætte bredden på én kolonne, vil de næste kolonner automatisk justere størrelsen. Eksemplet vil oprette en opdeling på 25%/50%/25%:
Eksempel
<div class="row"> <div class="col">col</div> <div class="col-6">col-6</div> <div class="col">col</div> </div>
Flere ens kolonner
Eksempel
<!-- To ens kolonner --> <div class="row"> <div class="col">1 of 2</div> <div class="col">2 of 2</div> </div> <!-- Fire ens kolonner --> <div class="row"> <div class="col">1 of 4</div> <div class="col">2 of 4</div> <div class="col">3 of 4</div> <div class="col">4 of 4</div> </div> <!-- Seks ens kolonner --> <div class="row"> <div class="col">1 of 6</div> <div class="col">2 of 6</div> <div class="col">3 of 6</div> <div class="col">4 of 6</div> <div class="col">5 of 6</div> <div class="col">6 of 6</div> </div>
Row Cols
Du kan også bruge .row-cols-* Kontrollerne skal vises i kolonner ved siden af hinanden (uanset hvor mange kolonner der er):
Eksempel
<div class="row row-cols-1"> <div class="col">1 of 2</div> <div class="col">2 of 2</div> </div> <div class="row row-cols-2"> <div class="col">1 of 4</div> <div class="col">2 of 4</div> <div class="col">3 of 4</div> <div class="col">4 of 4</div> </div> <div class="row row-cols-3"> <div class="col">1 of 6</div> <div class="col">2 of 6</div> <div class="col">3 of 6</div> <div class="col">4 of 6</div> <div class="col">5 of 6</div> <div class="col">6 of 6</div> </div>
Flere forskellige kolonner
Eksempel
<!-- To gange forskellige kolonner --> <div class="row"> <div class="col-8">1 of 2</div> <div class="col-4">2 of 2</div> </div> <!-- Fire ujævne kolonner --> <div class="row"> <div class="col-2">1 of 4</div> <div class="col-2">2 of 4</div> <div class="col-2">3 of 4</div> <div class="col-6">4 of 4</div> </div> <!-- Indstilling af to kolonnebredder --> <div class="row"> <div class="col-4">1 of 4</div> <div class="col-6">2 of 4</div> <div class="col">3 of 4</div> <div class="col">4 of 4</div> </div>
Lige højde
Hvis en kolonne er højere end den anden (på grund af tekst eller CSS-højde), vil de øvrige følge:
Eksempel
<div class="row"> <div class="col">Lorem ipsum...</div> <div class="col">col</div> <div class="col">col</div> </div>
Indlejrede kolonner
Dette eksempel viser, hvordan du opretter en to-kolonneopsætning, hvor en kolonne indeholder to andre kolonner:
Eksempel
<div class="row">
<div class="col-8">
.col-8
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>
<div class="col-4">.col-4</div>
</div>
Responsiv klasse
Bootstrap 5-gitterssystemet har fem klasser:
.col-(ekstremt små enheder - skærmbredde er mindre end 576px).col-sm-(små enheder - skærmbredde er 576px eller større).col-md-(mellemstore enheder - skærmbredde er 768 pixels eller større).col-lg-(store enheder - skærmbredde er 992 pixels eller større).col-xl-(xlarge enheder - skærmbredde er 1200px eller større).col-xxl-(xxlarge enheder - skærmbredde er 1400px eller større)
kan du kombinere ovenstående klasser for at skabe mere dynamiske og fleksible layout.
Tip:hver klasse forstørrer sig proportionalt, så hvis du ønsker at oprette sm og md Ved at sætte samme bredde, skal du kun specificere sm。
Stakket til horisontal
Dette eksempel viser, hvordan du opretter en kolonneopsætning, der starter med at være stakket på små enheder og derefter bliver en horisontal opsætning på større enheder (sm, md, lg og xl):
Eksempel
<div class="row"> <div class="col-sm-9">col-sm-9</div> <div class="col-sm-3">col-sm-3</div> </div> <div class="row"> <div class="col-sm">col-sm</div> <div class="col-sm">col-sm</div> <div class="col-sm">col-sm</div> </div>
Mix og match
Eksempel
<!-- På ekstra små enheder 50%/50% opdelt, på store enheder 75%/25% opdelt --> <div class="row"> <div class="col-6 col-sm-9">col-6 col-sm-9</div> <div class="col-6 col-sm-3">col-6 col-sm-3</div> </div> <!-- På ekstra små, små, mellemstore enheder 58%/42% opdelt, på store og ekstra store enheder 66.3%/33.3% opdelt --> <div class="row"> <div class="col-7 col-lg-8">col-7 col-lg-8</div> <div class="col-5 col-lg-4">col-5 col-lg-4</div> </div> <!-- På små enheder 25%/75% opdelt, på mellemstore enheder 50%/50% opdelt, på store og ekstra store enheder 33%/66% opdelt. På ekstra små enheder vil det automatisk stables (100%) --> <div class="row"> <div class="col-sm-3 col-md-6 col-lg-4">col-sm-3 col-md-6 col-lg-4</div> <div class="col-sm-9 col-md-6 col-lg-8">col-sm-9 col-md-6 col-lg-8</div> </div>
ingen gutter
Hvis du ønsker at ændre afstanden mellem kolonnerne (ekstra plads), skal du bruge enhver .g-1|2|3|4|5 klassen (.g-4 er standardværdien).
Hvis du ønsker at fjerne gitteret (gutter) fuldstændigt, skal du bruge .g-0：
Eksempel
<div class="row g-0">
- Forrige side BS5 gitter XXL
- Næste side BS5 grundlæggende skabelon
