Eksempler på bootstrap-gitter

Grundlæggende gitterlayouts for at gøre dig fortrolig med at bygge i Bootstrap-gittersystemet.

I disse eksempler er .themed-grid-colklassen tilføjet til kolonnerne for at tilføje nogle temaer. Dette er ikke en klasse, der er tilgængelig i Bootstrap som standard.

Fem gitterniveauer

Der er fem niveauer til Bootstrap-gittersystemet, en for hver række af enheder, vi understøtter. Hvert niveau starter ved en minimum viewport-størrelse og gælder automatisk for de større enheder, medmindre de tilsidesættes.

.col-4
.col-4
.col-4
.col-sm-4
.col-sm-4
.col-sm-4
.col-md-4
.col-md-4
.col-md-4
.col-lg-4
.col-lg-4
.col-lg-4
.col-xl-4
.col-xl-4
.col-xl-4

Tre lige store kolonner

Få tre kolonner med lige bredde, startende ved desktops og skalering til store desktops . På mobile enheder, tablets og derunder vil kolonnerne automatisk stables.

.col-md-4
.col-md-4
.col-md-4

Tre ulige søjler

Få tre kolonner, der starter ved desktops og skalerer til store desktops i forskellige bredder. Husk, at gitterkolonner skal lægge op til tolv for en enkelt vandret blok. Mere end det, og kolonner begynder at stables uanset visningsporten.

.col-md-3
.col-md-6
.col-md-3

To kolonner

Få to kolonner, der starter ved desktops og skalerer til store desktops .

.col-md-8
.col-md-4

Fuld bredde, enkelt søjle

Ingen gitterklasser er nødvendige for elementer i fuld bredde.


To kolonner med to indlejrede kolonner

I henhold til dokumentationen er indlejring let - bare sæt en række kolonner i en eksisterende kolonne. Dette giver dig to kolonner, der starter ved skriveborde og skalerer til store skriveborde med yderligere to (lige bredder) i den større kolonne.

På mobilenhedsstørrelser, tablets og nedefter, stables disse kolonner og deres indlejrede kolonner.

.col-md-8
.col-md-6
.col-md-6
.col-md-4

Blandet: mobil og desktop

Bootstrap v4-gittersystemet har fem klasser: xs (ekstra lille), sm (lille), md (medium), lg (stor) og xl (ekstra stor). Du kan bruge næsten enhver kombination af disse klasser til at skabe mere dynamiske og fleksible layouts.

Hvert niveau af klasser skaleres op, hvilket betyder, at hvis du planlægger at indstille de samme bredder for xs og sm, behøver du kun at angive xs.

.col-12 .col-md-8
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6
.col-6

Blandet: mobil, tablet og desktop

.col-12 .col-sm-6 .col-lg-8
.col-6 .col-lg-4
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4