Deaktivieren Sie die Reaktionsfähigkeit von Bootstrap, indem Sie die Breite des Containers festlegen und die erste Ebene des Rastersystems verwenden. Lesen Sie die Dokumentation für weitere Informationen.
Beachten Sie das Fehlen des <meta name="viewport" content="width=device-width, initial-scale=1">, das den Zoom-Aspekt von Websites auf Mobilgeräten deaktiviert. Außerdem haben wir die Breite unseres Containers zurückgesetzt und die Navigationsleiste geändert, um ein Zusammenfallen zu verhindern, und sind im Grunde startklar.
Als Heads-up ist die Navbar-Komponente hier ziemlich knifflig, da die Stile für ihre Anzeige ziemlich spezifisch und detailliert sind. Außerkraftsetzungen, um sicherzustellen, dass die Anzeige von Desktop-Stilen nicht so leistungsfähig oder elegant ist, wie man es gerne hätte. Beachten Sie jedoch, dass es potenzielle Fallstricke geben kann, wenn Sie auf diesem Beispiel aufbauen, wenn Sie die Navigationsleiste verwenden.
Nicht reagierende Layouts heben einen entscheidenden Nachteil fester Elemente hervor. Jede feste Komponente, wie z. B. eine feste Navigationsleiste, kann nicht gescrollt werden, wenn der Darstellungsbereich schmaler als der Seiteninhalt wird. Mit anderen Worten, angesichts der Breite des nicht reagierenden Containers von 970 Pixel und eines Darstellungsbereichs von 800 Pixel werden Sie potenziell 170 Pixel an Inhalten ausblenden.
Daran führt kein Weg vorbei, da dies das Standardverhalten des Browsers ist. Die einzige Lösung ist ein responsives Layout oder die Verwendung eines nicht fixierten Elements.