Deaktiviere die Responsivität von Bootstrap, indem du die Breite des Containers fixierst und für alles die untersten Rasterklassen verwendest. Lies die Dokumentation für mehr Informationen.
Beachte, dass es kein <meta name="viewport" content="width=device-width, initial-scale=1"> gibt, was das Anpassen der Seite auf mobilen Geräten deaktiviert. Außerdem setzen wir die Breite von unserem Container zurück und verändern die Navbar, so dass sie nicht mehr zusammenklappt, und sind damit schon quasi fertig.
Ein kleiner Hinweis: die Navbar-Komponente ist in diesem Zusammenhang eher schwierig zu handhaben, da die Stile für ihre Anzeige eher spezifisch und detailliert sind. Überschreibungen dieser Stile für eine Desktop-PC-artige Anzeige sind nicht so schlank oder leicht zu berechnen, wie man es sich vielleicht wünscht. Denk einfach daran, dass es hier eine größere Gefahr für Probleme gibt, wenn du das Beispiel erweiterst.
Nicht-responsive Layouts zeigen ein wichtiges Problem mit fixierten Elementen auf. Jede fixierte Komponente, wie z.B. eine fixierte Navbar, wird nicht scrollbar sein, wenn das Ansichtsfenster kleiner als der Seiteninhalt wird. Anders gesagt, da der nicht-responsive Container eine Breite von 970px hat, wirst du z.B. 170px Inhalt verbergen, wenn ein Ansichtsfenster 800px breit ist.
Es handelt sich dabei um Standard-Browser-Verhalten, deshalb gibt es keinen Weg drumherum. Die einzige Lösung ist die Verwendung eines responsiven Layouts oder eines nicht fixierten Elements.