Bootstrap 5 gitter

Bootstrap 5 gitter system

Bootstrap's rutenetssystem er bygget med flexbox, og der er maksimalt 12 kolonner på siden.

Hvis du ikke vil bruge alle 12 kolonner separat, kan du kombinere dem for at skabe bredere kolonner:

span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1
span 4 span 4 span 4
span 4 span 8
span 6 span 6
span 12

Rutenetssystemet er responsivt, og kolonnerne vil automatisk omarrangeres efter skærmstørrelse.

Sørg for, at summen er 12 eller mindre (hvis du ikke bruger alle 12 tilgængelige kolonner).

Rutenetklasser

Bootstrap 5's rutenetssystem har seks 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)

Du kan kombinere ovenstående klasser for at skabe mere dynamiske og fleksible layouter.

Tip:Hver klasse forstørrer sig i forhold, så hvis du vil have sm og md For at indstille samme bredde skal du kun specificere sm.

Bootstrap 5's grundlæggende rutenetstruktur

Her er Bootstrap 5's grundlæggende rutenetstruktur:

/* Kontroller kolonnbredde samt deres visning på forskellige enheder */
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
/* Lad Bootstrap automatisk håndtere layoutet */
<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

Første eksempel: Opret en række (<div class="row">). Tilføj derefter det ønskede antal kolonner (med passende .col-*-* klassens etiket). Det første stjerne (*) repræsenterer responsivitet: sm, md, lg, xl eller xxl, mens det andet stjerne repræsenterer et tal, og summen af tal i hver række skal være 12.

Andet eksempel: Ikke giv hver col Tilføj et tal, i stedet for at lade bootstrap håndtere layoutet for at oprette ens brede kolonner: to "col" Element = hver col har en bredde på 50%, mens tre cols har en bredde på 33.33%. Fire kolonner = 25% bredde, osv. Du kan også bruge .col-sm|md|lg|xl|xxl Gør kolonnerne responsive.

Her har vi samlet nogle grundlæggende eksempler på Bootstrap 5 gitterlayout.

Tredelt kolonne

Følgende eksempel viser, hvordan du opretter tre ens brede kolonner på alle enheder og skærmbredder:

Eksempel

<div class="row">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

Prøv det selv

Responsiv kolonne

Følgende eksempel viser, hvordan du starter med at skabe fire ens brede kolonner på en tablet og derefter udvider til stor skærm.På telefoner eller skærme med en bredde på mindre end 576px vil kolonnerne automatisk stables sammen:

Eksempel

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

Prøv det selv

To forskellige responsive kolonner

Følgende eksempel viser, hvordan du får to forskellige brede kolonner på en tablet og udvider til stor skærm:

Eksempel

<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-8">.col-sm-8</div>
</div>

Prøv det selv

Tip:Du vil lære mere om dette i denne vejledning. Gitterssystem Flere indhold.