Bootstrap 5 gitter system

Gridsystem

Bootstrap's gridsystem 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:

Gridsystemet er responsivt og kolonnerne arrangeres automatisk baseret på skærmstørrelsen.

Sørg for, at summen er lig med eller mindre end 12 (du behøver ikke at bruge alle 12 tilgængelige kolonner).

Gridklasser

Bootstrap 5's gridsystem tilbyder seks klasser:

  • .col- (Ekstra små enheder - skærmbredde er mindre end 576px)
  • .col-sm- (Små enheder - skærmbredde er lig med eller større end 576px)
  • .col-md- (Mellemstore enheder - skærmbredde er lig med eller større end 768px)
  • .col-lg- (Store enheder - skærmbredde er lig med eller større end 992px)
  • .col-xl- (Uvanligt store enheder - skærmbredde er lig med eller større end 1200px)
  • .col-xxl- (Ekstra store enheder - skærmbredde er lig med eller større end 1400px)

Kombiner ovenstående klasser for at skabe mere dynamiske og fleksible layouts.

Tip:Hver klasse er forstørret i forhold, så hvis du vil sætte samme bredde til sm og md, skal du kun specificere sm.

Bootstrap 5's grundlæggende gridstruktur

Her er Bootstrap 5's grundlæggende gridstruktur:

/* Kontroller kolonnebredde, 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>
/* Eller lad Bootstrap automatisk håndtere layoutet */
<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

Prøv det selv

Første eksempel: Opret en række (<div class = "row">). Tilføj derefter det ønskede antal kolonner (med .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 som samlet skal summere til 12.

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

Gitterindstillinger

Følgende tabel opsummerer, hvordan Bootstrap 5's gitterssystem fungerer på forskellige skærmstørrelser:

Ekstremt lille (<576px) Lille (>=576px) Mellemstort (>=768px) Stort (>=992px) Vedtaget stort (>=1200px) Ekstremt stort (>=1400px)
Klassepræfiks .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
Gitteropførsel Altid horisontalt Foldes sammen, horisontalt over bruddet Foldes sammen, horisontalt over bruddet Foldes sammen, horisontalt over bruddet Foldes sammen, horisontalt over bruddet Foldes sammen, horisontalt over bruddet
Containerbredde Ingen (auto) 540px 720px 960px 1140px 1320px
Tilgængelig for Stående Lydvis Tablet Bærbar computer Bærbar og stationær computer Bærbar og stationær computer
Kolonnens # 12 12 12 12 12 12
Gutter bredde 1.5rem (på hver side af kolonnen 0.75rem) 1.5rem (på hver side af kolonnen 0.75rem) 1.5rem (på hver side af kolonnen 0.75rem) 1.5rem (på hver side af kolonnen 0.75rem) 1.5rem (på hver side af kolonnen 0.75rem) 1.5rem (på hver side af kolonnen 0.75rem)
Kan indlejres Ja Ja Ja Ja Ja Ja
Forskydning Ja Ja Ja Ja Ja Ja
Kolonne sortering Ja Ja Ja Ja Ja Ja