#jquery #twitter-bootstrap #bootstrap-4 #navbar
#jquery #twitter-bootstrap #bootstrap-4 #панель навигации
Вопрос:
У меня есть панель навигации bootstrap, в которой есть меню, которое выдвигается при щелчке правой кнопкой мыши на мобильных устройствах и небольших видовых экранах. При просмотре на рабочем столе я бы хотел, чтобы применялись стандартные стили начальной загрузки для панели навигации (кнопки меню нет, пункты меню отображаются встроенным образом непосредственно в панели навигации). Похоже, что он работает, как и ожидалось, на небольших видовых экранах, но на рабочем столе, похоже, он по-прежнему использует стили из медиа-запроса. Я полагаю, есть что-то, что я упускаю из виду. Может кто-нибудь посоветовать, что я здесь делаю не так? Код и пример можно найти здесь.
Ответ №1:
В медиа-запросе просто измените min-width на max-width:500px вместо этого, после этого он должен работать.
Комментарии:
1. Спасибо за ответ, если я изменю максимальную ширину, это будет хорошо выглядеть на рабочем столе, но на мобильном устройстве анимация меню больше не выдвигается справа, а просто ведет себя как стандартная анимация начальной загрузки (опускается сверху)
2. Я думаю, это потому, что точка останова начальной загрузки для небольших устройств равна 768 пикселей, поэтому попробуйте вместо этого изменить максимальную ширину на 767 пикселей
3. Это определенно правильный путь. Я изменил максимальную ширину с настройкой 768, как вы предложили, и получил смешанные (лучшие) результаты. Панель навигации теперь корректно отображается на настольных компьютерах и мобильных устройствах, однако в формате планшета (880 X 484) она по-прежнему ведет себя как стандартная выпадающая навигация начальной загрузки.
4. Хорошо, просто найдите идеальную настройку с запросами, вот ключ, хорошее кодирование.