Rutenettsystem
Bruk vårt kraftige mobil-første flexbox-nettverk for å bygge oppsett i alle former og størrelser takket være et tolv kolonnesystem, fem standard responsive nivåer, Sass-variabler og -mikser, og dusinvis av forhåndsdefinerte klasser.
Hvordan det fungerer
Bootstraps rutenettsystem bruker en serie beholdere, rader og kolonner for å layoute og justere innhold. Den er bygget med flexbox og er fullstendig responsiv. Nedenfor er et eksempel og en grundig titt på hvordan rutenettet kommer sammen.
Ny eller ukjent med flexbox? Les denne CSS Tricks flexbox-guiden for bakgrunn, terminologi, retningslinjer og kodebiter.
<div class="container">
<div class="row">
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
</div>
</div>
Eksemplet ovenfor oppretter tre like brede kolonner på små, mellomstore, store og ekstra store enheter ved å bruke våre forhåndsdefinerte rutenettklasser. Disse kolonnene er sentrert på siden med den overordnede .container
.
Nedbryting, slik fungerer det:
- Beholdere gir et middel til å sentrere innholdet på nettstedet ditt horisontalt. Bruk
.container
for en responsiv pikselbredde eller.container-fluid
forwidth: 100%
alle visningsporter og enhetsstørrelser. - Rader er omslag for kolonner. Hver søyle har horisontal
padding
(kalt en renne) for å kontrollere avstanden mellom dem. Dettepadding
motvirkes så på radene med negative marginer. På denne måten er alt innholdet i kolonnene dine visuelt justert nedover venstre side. - I et rutenettoppsett må innhold plasseres i kolonner, og bare kolonner kan være umiddelbare underordnede rader.
- Takket være flexbox vil rutenettskolonner uten spesifisert
width
automatisk layout ha samme bredde kolonner. For eksempel vil fire forekomster av.col-sm
hver automatisk være 25 % bred fra det lille bruddpunktet og oppover. Se delen for kolonner for automatisk layout for flere eksempler. - Kolonneklasser angir antall kolonner du vil bruke av de mulige 12 per rad. Så hvis du vil ha tre like brede kolonner på tvers, kan du bruke
.col-4
. - Kolonne
width
er satt i prosenter, slik at de alltid er flytende og i størrelse i forhold til det overordnede elementet. - Kolonner har horisontale
padding
for å lage rennene mellom individuelle kolonner, men du kan fjernemargin
fra rader ogpadding
fra kolonner med.no-gutters
på.row
. - For å gjøre rutenettet responsivt, er det fem rutenettbruddpunkter, ett for hvert responsivt bruddpunkt : alle bruddpunkter (ekstra små), små, middels, store og ekstra store.
- Rutenettbruddpunkter er basert på mediespørringer med minimumsbredde, noe som betyr at de gjelder for det ene bruddpunktet og alle de over det (
.col-sm-4
gjelder f.eks. små, mellomstore, store og ekstra store enheter, men ikke det førstexs
bruddpunktet). - Du kan bruke forhåndsdefinerte rutenettklasser (som
.col-4
) eller Sass-mikser for mer semantisk markering.
Vær oppmerksom på begrensningene og feilene rundt flexbox , som manglende evne til å bruke noen HTML-elementer som flex-beholdere .
Rutenettalternativer
Mens Bootstrap bruker em
s eller rem
s for å definere de fleste størrelser, px
brukes s for grid breakpoints og containerbredder. Dette er fordi visningsportens bredde er i piksler og ikke endres med skriftstørrelsen .
Se hvordan aspekter av Bootstrap-rutenettsystemet fungerer på tvers av flere enheter med en hendig tabell.
Ekstra liten <576px |
Liten ≥576 piksler |
Middels ≥768 piksler |
Stor ≥992 piksler |
Ekstra stor ≥1200px |
|
---|---|---|---|---|---|
Maks beholderbredde | Ingen (auto) | 540 piksler | 720 piksler | 960 piksler | 1140 piksler |
Klasseprefiks | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
antall kolonner | 12 | ||||
Rennebredde | 30px (15px på hver side av en kolonne) | ||||
Nestbar | Ja | ||||
Kolonnebestilling | Ja |
Auto-layout kolonner
Bruk brytepunktspesifikke kolonneklasser for enkel kolonnestørrelse uten en eksplisitt nummerert klasse som .col-sm-6
.
Lik bredde
Her er for eksempel to rutenettoppsett som gjelder for hver enhet og visningsport, fra xs
til xl
. Legg til et hvilket som helst antall enhetsløse klasser for hvert bruddpunkt du trenger, og hver kolonne vil ha samme bredde.
<div class="container">
<div class="row">
<div class="col">
1 of 2
</div>
<div class="col">
2 of 2
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col">
2 of 3
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
Multilinje med lik bredde
Lag kolonner med lik bredde som spenner over flere linjer ved å sette inn en .w-100
der du vil at kolonnene skal brytes til en ny linje. Gjør pausene responsive ved å blande .w-100
med noen responsive display-verktøy .
Det var en Safari flexbox-feil som forhindret dette i å fungere uten en eksplisitt flex-basis
eller border
. Det finnes løsninger for eldre nettleserversjoner, men de burde ikke være nødvendige hvis målnettleserne dine ikke faller inn i buggy-versjonene.
<div class="container">
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="w-100"></div>
<div class="col">col</div>
<div class="col">col</div>
</div>
</div>
Innstilling av én kolonnebredde
Automatisk oppsett for flexbox-rutenettskolonner betyr også at du kan stille inn bredden på én kolonne og få søskensøylene automatisk til å endre størrelsen rundt den. Du kan bruke forhåndsdefinerte rutenettklasser (som vist nedenfor), rutenettblandinger eller inline-bredder. Merk at de andre kolonnene vil endre størrelsen uansett bredden på midtkolonnen.
<div class="container">
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-6">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-5">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
Variabel breddeinnhold
Bruk col-{breakpoint}-auto
klasser til å dimensjonere kolonner basert på den naturlige bredden på innholdet.
<div class="container">
<div class="row justify-content-md-center">
<div class="col col-lg-2">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
</div>
Responsive klasser
Bootstraps rutenett inkluderer fem lag med forhåndsdefinerte klasser for å bygge komplekse responsive layouter. Tilpass størrelsen på kolonnene dine på ekstra små, små, mellomstore, store eller ekstra store enheter slik du vil.
Alle bruddpunkter
For rutenett som er like fra den minste enheten til den største, bruk .col
og .col-*
klassene. Angi en nummerert klasse når du trenger en kolonne av særlig størrelse; ellers hold deg gjerne til .col
.
<div class="container">
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
<div class="row">
<div class="col-8">col-8</div>
<div class="col-4">col-4</div>
</div>
</div>
Stablet til vannrett
Ved å bruke et enkelt sett med .col-sm-*
klasser kan du lage et grunnleggende rutenettsystem som starter stablet og blir horisontalt ved det lille bruddpunktet ( sm
).
<div class="container">
<div class="row">
<div class="col-sm-8">col-sm-8</div>
<div class="col-sm-4">col-sm-4</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>
</div>
Mix og match
Vil du ikke at kolonnene dine bare skal stables i noen rutenettlag? Bruk en kombinasjon av forskjellige klasser for hvert nivå etter behov. Se eksemplet nedenfor for en bedre ide om hvordan det hele fungerer.
<div class="container">
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>
Takrenner
Takrenner kan responsivt justeres ved hjelp av bruddpunktspesifikk polstring og nytteklasser med negativ margin. For å endre takrennene i en gitt rad, parer du et negativt marginverktøy på .row
og matchende polstringsverktøy på .col
s. Forelderen .container
eller .container-fluid
forelderen må kanskje også justeres for å unngå uønsket overløp, ved å bruke igjen matchende polstringsverktøy.
Her er et eksempel på å tilpasse Bootstrap-rutenettet ved det store ( lg
) bruddpunktet og over. Vi har økt .col
polstringen med .px-lg-5
, motvirket det med .mx-lg-n5
på forelderen .row
og deretter justert .container
omslaget med .px-lg-5
.
<div class="container px-lg-5">
<div class="row mx-lg-n5">
<div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
<div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
</div>
</div>
Rad kolonner
Bruk de responsive .row-cols-*
klassene til raskt å angi antall kolonner som best gjengir innholdet og oppsettet ditt. Mens normale .col-*
klasser gjelder for de individuelle kolonnene (f.eks. .col-md-4
), er radkolonneklassene satt på overordnet .row
som en snarvei.
Bruk disse radkolonneklassene for raskt å lage grunnleggende rutenettoppsett eller for å kontrollere kortoppsettene dine.
<div class="container">
<div class="row row-cols-2">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-3">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col-6">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
Du kan også bruke den medfølgende Sass mixin row-cols()
,:
.element {
// Three columns to start
@include row-cols(3);
// Five columns from medium breakpoint up
@include media-breakpoint-up(md) {
@include row-cols(5);
}
}
Justering
Bruk flexbox-justeringsverktøy for å justere kolonner vertikalt og horisontalt. Internet Explorer 10-11 støtter ikke vertikal justering av flex-elementer når flex-beholderen har en min-height
som vist nedenfor. Se Flexbugs #3 for flere detaljer.
Vertikal justering
<div class="container">
<div class="row align-items-start">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
<div class="row align-items-center">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
<div class="row align-items-end">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col align-self-start">
One of three columns
</div>
<div class="col align-self-center">
One of three columns
</div>
<div class="col align-self-end">
One of three columns
</div>
</div>
</div>
Horisontal justering
<div class="container">
<div class="row justify-content-start">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-center">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-end">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-around">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-between">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
</div>
Ingen takrenner
Rennene mellom søyler i våre forhåndsdefinerte rutenettklasser kan fjernes med .no-gutters
. Dette fjerner negative margin
s fra .row
og horisontale padding
fra alle umiddelbare underordnede kolonner.
Her er kildekoden for å lage disse stilene. Vær oppmerksom på at kolonneoverstyringer kun omfatter de første underordnede kolonnene og målrettes via attributtvelgeren . Selv om dette genererer en mer spesifikk velger, kan kolonneutfylling fortsatt tilpasses ytterligere med avstandsverktøy .
Trenger du et kant-til-kant-design? Slipp forelderen .container
eller .container-fluid
.
.no-gutters {
margin-right: 0;
margin-left: 0;
> .col,
> [class*="col-"] {
padding-right: 0;
padding-left: 0;
}
}
I praksis ser det slik ut. Merk at du kan fortsette å bruke dette med alle andre forhåndsdefinerte rutenettklasser (inkludert kolonnebredder, responsive nivåer, ombestillinger og mer).
<div class="row no-gutters">
<div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
Kolonneinnpakning
Hvis mer enn 12 kolonner er plassert innenfor en enkelt rad, vil hver gruppe ekstra kolonner, som én enhet, pakkes inn på en ny linje.
Siden 9 + 4 = 13 > 12, blir denne 4-kolonne brede div viklet inn på en ny linje som en sammenhengende enhet.
Påfølgende kolonner fortsetter langs den nye linjen.
<div class="container">
<div class="row">
<div class="col-9">.col-9</div>
<div class="col-4">.col-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
<div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
</div>
</div>
Kolonneskift
Å bryte kolonner til en ny linje i flexbox krever et lite hack: legg til et element med width: 100%
hvor du vil pakke kolonnene til en ny linje. Normalt oppnås dette med flere .row
s, men ikke alle implementeringsmetoder kan ta hensyn til dette.
<div class="container">
<div class="row">
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<!-- Force next columns to break to new line -->
<div class="w-100"></div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
</div>
</div>
Du kan også bruke denne pausen ved spesifikke pausepunkter med våre responsive displayverktøy .
<div class="container">
<div class="row">
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<!-- Force next columns to break to new line at md breakpoint and up -->
<div class="w-100 d-none d-md-block"></div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
</div>
</div>
Ombestilling
Bestill klasser
Bruk .order-
klasser for å kontrollere den visuelle rekkefølgen på innholdet ditt. Disse klassene er responsive, så du kan angi order
etter bruddpunkt (f.eks. .order-1.order-md-2
). Inkluderer støtte for 1
gjennomgående 12
på tvers av alle fem rutenettlagene.
<div class="container">
<div class="row">
<div class="col">
First in DOM, no order applied
</div>
<div class="col order-12">
Second in DOM, with a larger order
</div>
<div class="col order-1">
Third in DOM, with an order of 1
</div>
</div>
</div>
Det er også responsive .order-first
og .order-last
klasser som endrer order
elementet ved å bruke henholdsvis order: -1
og order: 13
( order: $columns + 1
). Disse klassene kan også blandes med de nummererte .order-*
klassene etter behov.
<div class="container">
<div class="row">
<div class="col order-last">
First in DOM, ordered last
</div>
<div class="col">
Second in DOM, unordered
</div>
<div class="col order-first">
Third in DOM, ordered first
</div>
</div>
</div>
Forskyvning av kolonner
Du kan forskyve rutenettkolonner på to måter: våre responsive .offset-
rutenettklasser og våre marginverktøy . Rutenettklasser er dimensjonert for å matche kolonner, mens marginer er mer nyttige for raske oppsett der bredden på forskyvningen er variabel.
Offsetklasser
Flytt kolonner til høyre ved å bruke .offset-md-*
klasser. Disse klassene øker venstre marg i en kolonne med *
kolonner. .offset-md-4
Flytter for eksempel .col-md-4
over fire kolonner.
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
<div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>
</div>
I tillegg til kolonnetømming ved responsive bruddpunkter, kan det hende du må tilbakestille forskyvninger. Se dette i aksjon i rutenetteksemplet .
<div class="container">
<div class="row">
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
<div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
<div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
</div>
</div>
Marginverktøy
Med overgangen til flexbox i v4 kan du bruke marginverktøy som .mr-auto
å tvinge søskenkolonner bort fra hverandre.
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
<div class="row">
<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
</div>
<div class="row">
<div class="col-auto mr-auto">.col-auto .mr-auto</div>
<div class="col-auto">.col-auto</div>
</div>
</div>
Hekking
For å legge innholdet ditt med standardrutenettet, legg til en ny .row
og et sett med .col-sm-*
kolonner i en eksisterende .col-sm-*
kolonne. Nestede rader bør inneholde et sett med kolonner som summerer seg til 12 eller færre (det er ikke nødvendig at du bruker alle de 12 tilgjengelige kolonnene).
<div class="container">
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-8 col-sm-6">
Level 2: .col-8 .col-sm-6
</div>
<div class="col-4 col-sm-6">
Level 2: .col-4 .col-sm-6
</div>
</div>
</div>
</div>
</div>
Sass blandinger
Når du bruker Bootstraps kilde Sass-filer, har du muligheten til å bruke Sass-variabler og mixins for å lage tilpassede, semantiske og responsive sideoppsett. Våre forhåndsdefinerte rutenettklasser bruker de samme variablene og miksene for å gi en hel serie med klar-til-bruk-klasser for raske responsive oppsett.
Variabler
Variabler og kart bestemmer antall kolonner, takrennebredden og mediespørringspunktet der flytende kolonner skal begynne. Vi bruker disse til å generere de forhåndsdefinerte rutenettklassene som er dokumentert ovenfor, så vel som for de tilpassede miksene som er oppført nedenfor.
$grid-columns: 12;
$grid-gutter-width: 30px;
$grid-breakpoints: (
// Extra small screen / phone
xs: 0,
// Small screen / phone
sm: 576px,
// Medium screen / tablet
md: 768px,
// Large screen / desktop
lg: 992px,
// Extra large screen / wide desktop
xl: 1200px
);
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px
);
Mixins
Mixins brukes sammen med rutenettvariablene for å generere semantisk CSS for individuelle rutenettkolonner.
// Creates a wrapper for a series of columns
@include make-row();
// Make the element grid-ready (applying everything but the width)
@include make-col-ready();
@include make-col($size, $columns: $grid-columns);
// Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);
Eksempel bruk
Du kan endre variablene til dine egne tilpassede verdier, eller bare bruke mixins med standardverdiene deres. Her er et eksempel på bruk av standardinnstillingene for å lage en to-kolonne layout med et gap mellom.
.example-container {
@include make-container();
// Make sure to define this width after the mixin to override
// `width: 100%` generated by `make-container()`
width: 800px;
}
.example-row {
@include make-row();
}
.example-content-main {
@include make-col-ready();
@include media-breakpoint-up(sm) {
@include make-col(6);
}
@include media-breakpoint-up(lg) {
@include make-col(8);
}
}
.example-content-secondary {
@include make-col-ready();
@include media-breakpoint-up(sm) {
@include make-col(6);
}
@include media-breakpoint-up(lg) {
@include make-col(4);
}
}
<div class="example-container">
<div class="example-row">
<div class="example-content-main">Main content</div>
<div class="example-content-secondary">Secondary content</div>
</div>
</div>
Tilpasse rutenettet
Ved å bruke våre innebygde rutenett Sass-variabler og kart, er det mulig å tilpasse de forhåndsdefinerte rutenettklassene fullstendig. Endre antall nivåer, mediespørringsdimensjonene og beholderbreddene – og kompiler deretter på nytt.
Søyler og takrenner
Antall rutenettkolonner kan endres via Sass-variabler. $grid-columns
brukes til å generere breddene (i prosent) av hver enkelt søyle mens $grid-gutter-width
den angir bredden for søylerennene.
$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;
Rutenettlag
Når du går utover selve kolonnene, kan du også tilpasse antall rutenettlag. Hvis du bare ville ha fire rutenettnivåer, ville du oppdatere $grid-breakpoints
og $container-max-widths
til noe som dette:
$grid-breakpoints: (
xs: 0,
sm: 480px,
md: 768px,
lg: 1024px
);
$container-max-widths: (
sm: 420px,
md: 720px,
lg: 960px
);
Når du gjør endringer i Sass-variablene eller kartene, må du lagre endringene og kompilere på nytt. Hvis du gjør det, vil du få et helt nytt sett med forhåndsdefinerte rutenettklasser for kolonnebredder, forskyvninger og rekkefølge. Responsive synlighetsverktøy vil også bli oppdatert for å bruke de tilpassede bruddpunktene. Sørg for å angi rutenettverdier i px
(ikke rem
, em
, eller %
).