Деактивирайте отзивчивостта на Bootstrap, като фиксирате ширината на контейнера и използвате първото ниво на мрежата. Прочетете документацията за повече информация.
Обърнете внимание на липсата на <meta name="viewport" content="width=device-width, initial-scale=1">, което деактивира аспекта за мащабиране на сайтове в мобилни устройства. В допълнение, нулирахме ширината на нашия контейнер и променихме лентата за навигация, за да предотвратим свиване, и по принцип са готови.
Като предупреждение, компонентът на навигационната лента е доста труден тук, тъй като стиловете за показването му са доста специфични и подробни. Замени, за да се гарантира, че дисплеят на стиловете на работния плот не е толкова производителен или елегантен, колкото би искал. Само имайте предвид, че може да има потенциални проблеми, докато надграждате този пример, когато използвате навигационната лента.
Неотзивчивите оформления подчертават ключов недостатък на фиксираните елементи. Всеки фиксиран компонент, като например фиксирана навигационна лента, няма да може да се превърта, когато прозорецът за изглед стане по-тесен от съдържанието на страницата. С други думи, като се има предвид ширината на неотзивчивия контейнер от 970px и прозорец за изглед от 800px, потенциално ще скриете 170px съдържание.
Няма начин да се заобиколи това, тъй като това е поведението на браузъра по подразбиране. Единственото решение е адаптивно оформление или използване на нефиксиран елемент.