Schakel het reactievermogen van Bootstrap uit door de breedte van de container te bepalen en de eerste rastersysteemlaag te gebruiken. Lees de documentatie voor meer informatie.
Let op het ontbreken van de <meta name="viewport" content="width=device-width, initial-scale=1">, die het zoomaspect van sites op mobiele apparaten uitschakelt. Bovendien hebben we de breedte van onze container opnieuw ingesteld en de navigatiebalk gewijzigd om instorten te voorkomen, en zijn in principe goed om te gaan.
Als een waarschuwing, de navigatiebalkcomponent is hier nogal lastig omdat de stijlen voor het weergeven ervan nogal specifiek en gedetailleerd zijn. Overschrijvingen om ervoor te zorgen dat de weergave van desktopstijlen niet zo performant of strak is als men zou willen. Houd er rekening mee dat er mogelijke valkuilen kunnen zijn als u bovenop dit voorbeeld bouwt wanneer u de navigatiebalk gebruikt.
Niet-reagerende lay-outs benadrukken een belangrijk nadeel van vaste elementen. Elk vast onderdeel, zoals een vaste navigatiebalk, kan niet worden gescrold wanneer de viewport smaller wordt dan de pagina-inhoud. Met andere woorden, gezien de niet-reagerende containerbreedte van 970px en een viewport van 800px, verbergt u mogelijk 170px aan inhoud.
Er is geen manier om dit te omzeilen, aangezien het standaard browsergedrag is. De enige oplossing is een responsive layout of het gebruik van een niet-vast element.