Bootstrap 4 Dropdown Menu не работает?
Я скопировал официальный пример Bootstrap 4 для выпадающих меню, но он не работает, то есть ничего не выпадает.
10 ответов
Изменить: Если у кого-то еще есть эта проблема, я думаю, что решение для OP было то, что он не импортировал popper.js .
Проверьте, есть ли jQuery и все соответствующие компоненты Bootstrap. Также проверьте консоль и убедитесь, что нет ошибок.
Добавьте этот код в ваш jquery
Я использовал NuGet для установки BootStrap 4. У меня также были проблемы, когда он не отображал выпадающий список при нажатии. Он продолжал выдавать ошибку в базе jquery, о чем говорила консоль Chrome.
У меня изначально было следующее
Но я изменил его, чтобы использовать вместо этого в комплекте версию, и она начала работать
Это проблема с popper.js файлом. На официальном сайте я обнаружил, что файлы комплекта включают в себя popper, но не jquery. Мне удалось это исправить, добавив ссылку на эти файлы:
Однако я удалил popper.js , поскольку он входит в комплектный файл.
Попробуйте добавить эти строки в конец файла
Это должен быть /bootstrap.js , не /bootstrap.min.js .
С помощью JavaScript Вызовите раскрывающиеся списки с помощью JavaScript:
Вставьте этот код после bootstrap.min.js .
Кроме того, убедитесь, что вы добавили popper.min.js перед bootstrap.min.js .
Раскрывающиеся позиции размещаются благодаря Popper.js (кроме случаев, когда они содержатся в навигационной панели).
Включить их в этот порядок, это будет работать, я не знаю почему: D
Предполагая, что библиотеки Bootstrap и Popper были установлены с помощью диспетчера пакетов Nuget, для веб-приложения, использующего Visual Studio, в файле главной страницы (Site.Master), прямо под тегом body, добавьте ссылку на popper.min.js, введя:
Вот изображение для лучшего отображения местоположения:
Обратите внимание, что ссылка на добавляемую библиотеку popper должна быть в папке umd , а не в папке Scripts.
Источник
Выпадающее меню Bootstrap 5 не работает
Как относительный новичок в Bootstrap, я пытался закодировать меню с раскрывающимися списками. Код приведен ниже, но я обнаружил некоторые проблемы:
- Код меню был скопирован из документации GetBootstrap.com. Посмотрел на других сайтах, где может быть проблема, пробовал альтернативы, но безуспешно.
- bootstrap.min.css и bootstrap.bundle.min.js, обе версии 5, были связаны с кодом. Пробовали эти файлы прямо на сайте и по ссылкам. Также пробовал popper.js плюс bootstrap.min.js; тот же результат.
- Прямые ссылки работают, а раскрывающаяся часть — нет. Щелчок по раскрывающемуся элементу ничего не дает. Было бы здорово, если бы он отображался при наведении курсора и оставался на месте, чтобы можно было нажимать подпункты.
- Меню должно быть в правой части экрана; глядя на ответы, ms-auto должен это сделать. Это не.
- Когда экран свернут до размера планшета или телефона, меню переходит к ожидаемому сжатому символу, но не работает вообще; при нажатии ничего не будет отображаться.
3 ответа
Использование CDN для интеграции ресурсов Bootstrap 5.0.0-beta3 должно работать.
Надеюсь, это вам поможет!
Не стесняйтесь проголосовать за ответ
dropdown должен быть классом .. а не атрибутом:
Спасибо вам обоим Manifest Man и Зиму. Я использовал более раннюю версию bootstrap 5, и когда использовались последние версии bootstrap.min.css и bootstrap.bundle.min.js, он начал работать.
Кроме того, да, раскрывающийся список — это класс, а не атрибут.
Источник
Выпадающее меню Bootstrap не работает
У меня возникли проблемы с получением моего меню на работу. Я могу заставить navbar отлично отображаться, но когда я нажимаю на «выпадающее меню» (любой из них), он не отображает выпадающее меню. Я пробовал смотреть на другие сообщения об этом, но ничего, что исправило проблемы каждого, не помогло. Я скопировал источник прямо с сайта bootstrap, но я не могу заставить его работать на моей машине. У кого-нибудь есть идеи? Я смотрел на него в течение часа и не могу понять, что такое проблема.
18 ответов:
и посмотреть, если он будет работать.
У меня был проект bootstrap + rails, и выпадающий список работал нормально. Они перестали работать после обновления.
Это решение, которое исправило проблему, добавьте следующее .js file:
100% рабочего раствора
просто поместите ссылку Jquery в первую очередь ссылки js и css
Пример Правильного
Пример Неверный!
поставить ссылку на jQuery и JS, прежде чем связать начальной загрузки JS и вот так:
в случае, если кто-то еще сталкивается с той же проблемой, не забудьте проверить ваш код просмотр исходного кода страницы в вашем браузере, чтобы проверить, загружены ли все файлы jquery и bootstrap и правильные пути к файлу. Самое главное! убедитесь, что используете последнюю стабильную файл с jQuery.
я столкнулся с этим, когда я использовал ASP .NET формы. Решение, которое я использовал, удаляло или комментировало ссылки jQuery и Bootstrap из на главной странице. Кажется, это создает конфликт с ссылками jQuery и Bootstrap, которые вы помещаете в .
похоже, что для Rails 4 нужно сделать больше.
внутри вас Gemfile добавить.
Далее вам нужно запустить
это та часть, о которой никто не упоминал
откройте конфигурацию / приложение.рубидий файл
добавить это прямо перед вторым до последнего конца
config.активы.предварительная компиляция += %w(*.формат PNG.* формат JPG.* в формате JPEG *.gif)
как видно здесь около 20% вниз по странице.
далее Создать заказ.стиль CSS.scss файл в этом каталоге
как видно здесь немного ниже от вышеизложенного задача
внутри этого файла Include
теперь остановите сервер и перезагрузите его, и все должно работать нормально.
Я попытался запустить bootstrap без использования драгоценного камня, но это не сработало для меня.
надеюсь, что это поможет кому-то!
Я использую rails 4.0 и столкнулся с той же проблемой
вот мое решение, которое прошло испытание
добавить в Gemfile
затем добавьте в приложение / активы / javascripts / application.js
тогда выпадающий список должен работать
кстати, решение Криса также работает для меня.
но я думаю, что это меньше соответствует идее трубопроводных активов
Я думаю, что это вопрос маршрута ваш файл маршрута. Ни загрузочный файл, ни файл JQuery.
в моем случае, отключение расширений Chrome исправил. Я удалил их из хрома один за другим, пока не нашел виновника.
Так как я автор оскорбительного расширения Chrome, я думаю, мне лучше исправить расширение!
моя версия bootstrap указывала на bootstap4-alpha,
изменить на 4-бета
и он начал работать
проблема в том, что href-это href=»#» вы должны удалить href=»#» во всех тегах
для Bootstrap 4 вам нужна дополнительная библиотека. Если Вы читаете консоль браузера, Bootstrap фактически напечатает сообщение об ошибке, сообщающее вам, что вам это нужно для выпадающего списка для работы.
в угловых проектах мы добавляем angular-cli.json или угловой.в JSON строки тезисы:
согласно getBootstrap.com, выпадающие списки построены на сторонней библиотеке Popper.js. Итак, если выпадающее меню не работает onclick, но работает только при наведении указателя мыши на выпадающее меню, включите popper.js, bootstrap.js и bootstrap.стиль CSS. Не считая Поппера.js перед включением пакетов bootstrap может быть одной из причин.
может быть, кто-то там может извлечь выгоду из этого:
резюме (a.k.a. tl;dr)
выпадающие списки Bootstrap перестали выпадать из-за обновления с django-bootstrap3 версия 6.2.2 to 11.0.0 .
мы столкнулись с подобной проблемой в наследство django сайт, который сильно зависит от bootstrap через django-bootstrap3 . Сайт всегда работал нормально, и продолжал делать это в производстве, но не на нашей локальной тестовой системе. Их не было очевидные связанные изменения в коде, поэтому проблема зависимости была наиболее вероятной.
симптомы
при посещении сайта на локальный тестовый сервер django, это выглядело совершенно нормально на первый взгляд: стиль / макет с использованием bootstrap как и ожидалось, включая навигационную панель. Однако все выпадающие меню не удалось опустить.
нет ошибок в консоли браузера. Все статично js и css файлы были загружены успешно, и функциональность от других пакеты, полагающиеся на jquery работает, как ожидалось.
решение
выяснилось, что django-bootstrap3 пакет в нашей локальной среде python был обновлен до последней версии, 11.0.0 , в то время как сайт был построен с использованием 6.2.2 .
откат django-bootstrap3==6.2.2 решил проблему для нас, хотя я понятия не имею, что именно вызвало его.
я попробовал все вышеперечисленные ответы и единственная версия, которая работает для меня-это jquery 1.11.1. Я пробовал со всеми другими версиями 1.3.2, 1.4.4, 1.8.2, 3.3.1 и выпадающий список navbar не работает.
просто используйте этот 100% рабочий трюк, чтобы решить проблему выпадающего меню Bootstrap.
вставьте оба этих файла в любом месте страницы после открытия тега body. Если вы вставляете их внутри тега тела, то ваша проблема сохраняется.
Источник
Выпадающее меню Bootstrap не работает
У меня возникли проблемы с тем, чтобы мои выпадающие списки работали. Я могу заставить navbar отображаться отлично, но когда я нажимаю «выпадающий список» (любой из них), он не отображает раскрывающееся меню. Я пробовал смотреть на другие сообщения об этом, но ничего, что исправило проблемы каждого, не помогло. Я скопировал источник прямо с сайта bootstrap, но я не могу заставить его работать на моей машине. У кого-нибудь есть идеи? Я смотрел на него в течение часа и, кажется, не могу понять, что проблема.
18 ответов
и посмотреть, будет ли это работать.
У меня был проект bootstrap + rails, и выпадающий список работал нормально. Они перестали работать после обновления.
Это решение, которое исправило проблему, добавьте следующее .файл js:
100% рабочего раствора
просто поместите ссылку Jquery в первую очередь ссылки js и css
Пример Правильного
Пример Неверный!
поместите ссылку jquery JS перед загрузочной ссылкой js следующим образом:
в случае, если кто-то еще сталкивается с той же проблемой, не забудьте проверить ваш код просмотр исходного кода страницы в вашем браузере, чтобы проверить, загружены ли все файлы jQuery и bootstrap и правильные пути к файлу. Самое главное! обязательно используйте последний стабильный файл jquery.
я столкнулся с этим, когда я использовал ASP .NET Forms. Решение, которое я использовал, удаляло или комментировало ссылки jQuery и Bootstrap из на главной странице. Кажется, это создает конфликт с ссылками jQuery и Bootstrap, которые вы помещаете в .
похоже, что для Rails 4 нужно сделать больше.
внутри вас Gemfile добавить.
Далее вам нужно запустить
это та часть, о которой никто не упоминал
откройте конфигурацию/приложение.рубидий файл
добавить этого права до второй конец
конфигурации.активы.предварительная компиляция += %w(*.формат PNG.* формат JPG.* в формате JPEG *.gif)
как видно здесь около 20% вниз по странице.
далее Создать заказ.стиль CSS.файл scss в этом каталоге
app / активы / таблицы стилей
как видно здесь немного дальше вниз от вышеуказанного задача
внутри этого файла Include
теперь остановите сервер и перезагрузите, и все должно работать нормально.
Я попытался запустить bootstrap без использования драгоценного камня, но это не сработало для меня.
надеюсь, что это поможет кому-то!
Я использую rails 4.0 и столкнулся с той же проблемой
вот мое решение, которое прошло испытание
добавить в Gemfile
затем добавьте в приложение / активы / javascripts / application.js
тогда выпадающий список должен работать
кстати, решение Криса также работает для меня.
но я думаю, что это меньше соответствует идее трубопроводных активов
Я думаю, что это вопрос маршрута ваш файл маршрута. Ни загрузочный файл, ни файл JQuery.
в моем случае, отключение расширений Chrome исправил. Я снимал их с хрома один за другим, пока не нашел виновника.
Так как я автор оскорбительного расширения Chrome, я думаю, что лучше исправить расширение!
моя версия bootstrap указывала на bootstap4-alpha,
изменить на 4-бета
и он начал работать
проблема в том, что href-href=»#» вы должны удалить href=»#» во всех тегах
для Bootstrap 4 вам нужна дополнительная библиотека. Если Вы читаете консоль браузера, Bootstrap фактически напечатает сообщение об ошибке, сообщающее вам, что вам это нужно для выпадающего списка.
в угловых проектах мы добавляем angular-cli.json или угловой.в JSON строки тезисы:
согласно getBootstrap.com, выпадающие списки построены на сторонней библиотеке Popper.js. Итак, если выпадающее меню не работает onclick, но работает только при наведении выпадающего меню include popper.Яш, ушко.JS и ушко.стиль CSS. Не считая Поппера.js перед включением пакетов bootstrap может быть одной из причин.
может быть, кто-то там может извлечь выгоду из этого:
резюме (a.к. a. tl; dr)
раскрывающиеся списки Bootstrap перестали падать из-за обновления с django-bootstrap3 версия 6.2.2 to 11.0.0 .
мы столкнулись с аналогичной проблемой в наследии django сайт, который сильно зависит от bootstrap через django-bootstrap3 . Сайт всегда работал нормально и продолжал работать в производстве, но не на нашей локальной тестовой системе. Там не было очевидные связанные изменения в коде, поэтому проблема зависимости была наиболее вероятной.
симптомы
при посещении сайта на локальный тестовый сервер django, это выглядело совершенно нормально на первый взгляд: стиль / макет с использованием bootstrap как и ожидалось, включая navbar. Однако все раскрывающиеся меню не удалось открыть.
нет ошибок в консоли браузера. Все статично js и css файлы были загружены успешно, а функциональность из других пакеты, полагающиеся на jquery работает, как ожидалось.
решение
выяснилось, что django-bootstrap3 пакет в нашей локальной среде python был обновлен до последней версии, 11.0.0 , тогда как сайт был построен с использованием 6.2.2 .
откат django-bootstrap3==6.2.2 решил проблему для нас, хотя я понятия не имею, что именно вызвало это.
я попробовал все вышеперечисленные ответы и единственная версия, которая работает для меня-это jquery 1.11.1. Я пробовал со всеми другими версиями 1.3.2, 1.4.4, 1.8.2, 3.3.1 и выпадающее меню navbar не работает.
просто используйте этот 100% рабочий трюк, чтобы решить проблему выпадающего меню Bootstrap.
вставьте оба этих файла в любом месте страницы после открытия тега body. Если вы вставляете их внутри тега body, ваша проблема сохраняется.
Источник
