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