Inaktivera lyhördheten för Bootstrap genom att fixera bredden på behållaren och använda den första rutnätsnivån. Läs dokumentationen för mer information.
Observera avsaknaden av <meta name="viewport" content="width=device-width, initial-scale=1">, som inaktiverar zoomaspekten på webbplatser i mobila enheter. Dessutom har vi nollställt vår containers bredd och ändrat navigeringsfältet för att förhindra att det kollapsar, och är i princip bra att gå.
Som en heads up är navbar-komponenten ganska knepig här eftersom stilarna för att visa den är ganska specifika och detaljerade. Åsidosättanden för att säkerställa att skärmbilden av skrivbordsstilar inte är så presterande eller elegant som man skulle vilja. Var bara medveten om att det kan finnas potentiella gotchas när du bygger på det här exemplet när du använder navfältet.
Icke-responsiva layouter framhäver en viktig nackdel med fasta element. Alla fasta komponenter, till exempel ett fast navigeringsfält, kommer inte att kunna rullas när visningsporten blir smalare än sidinnehållet. Med andra ord, med tanke på den icke-responsiva behållarens bredd på 970px och en viewport på 800px, kommer du potentiellt att dölja 170px innehåll.
Det finns ingen väg runt detta eftersom det är standard webbläsarbeteende. Den enda lösningen är en responsiv layout eller att använda ett icke-fast element.