Deaktiver responsen til Bootstrap ved å fikse bredden på beholderen og bruke det første rutenettsystemet. Les dokumentasjonen for mer informasjon.
Legg merke til mangelen på <meta name="viewport" content="width=device-width, initial-scale=1">, som deaktiverer zoomeaspektet til nettsteder på mobile enheter. I tillegg har vi nullstilt containerens bredde og endret navbaren for å forhindre at den kollapser, og er i utgangspunktet god å gå.
Som et heads up er navbar-komponenten ganske vanskelig her ved at stilene for å vise den er ganske spesifikke og detaljerte. Overstyringer for å sikre at skrivebordsstiler ikke er så effektive eller elegante som man ønsker. Bare vær oppmerksom på at det kan være potensielle gotchas når du bygger på toppen av dette eksemplet når du bruker navbaren.
Ikke-responsive layouter fremhever en viktig ulempe ved faste elementer. En fast komponent, for eksempel en fast navigasjonslinje, vil ikke kunne rulles når visningsporten blir smalere enn sideinnholdet. Med andre ord, gitt den ikke-responsive beholderbredden på 970px og en viewport på 800px, vil du potensielt skjule 170px med innhold.
Det er ingen vei rundt dette siden det er standard nettleseroppførsel. Den eneste løsningen er en responsiv layout eller bruk av et ikke-fast element.