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