Заблоковано чутливість Bootstrap шляхом фіксації ширини контейнера, а також за допомогою першого рівня системи сітки. Прочитайте документацію щоб дізнатись більше.
Зверніть увагу на відсутність <meta name="viewport" content="width=device-width, initial-scale=1">. Відсутність цього запису блокує масштабування на мобільних пристроях. Також ми перевстановили ширину нашого контейнера.
Зверніть увагу, тут компоненти навігаційної панелі є досить складними, оскільки стилі для їх відображення потребують докладного і конкретного опису. Перевстановлення стилів, для забезпечення відображення на настільких комп'ютерах, є не настільки продуктивним або гладким як хотілося б. Просто майте на увазі, що потенційно можуть бути підводні камені, при створенні навігаційних панелей з цього прикладу.
Нечутливі шаблони проявляють ключовий недолік для фіксованих елементів. Будь-який фіксований компонент, у тому числі навігаційна панель, буде непіддатливим для прокручування, якщо оглядове вікно стає вужчим, ніж вміст сторінки. Іншими словами, при нечутливому контейнері шириною 970px та оглядовому вікні 800px, ви потенційно матимете 170px прихованого вмісту.
Немає способу обійти це, оскільки такою є поведінка браузерів початково. Єдиним рішенням є чутливий шаблон, або використання нефіксованих елементів.