Bootstrap выпадающий список не работает

Выпадающее меню Bootstrap 5 не работает

Как относительный новичок в Bootstrap, я пытался закодировать меню с раскрывающимися списками. Код приведен ниже, но я обнаружил некоторые проблемы:

1. Код меню был скопирован из документации GetBootstrap.com. Посмотрел на других сайтах, где может быть проблема, пробовал альтернативы, но безуспешно.
2. bootstrap.min.css и bootstrap.bundle.min.js, обе версии 5, были связаны с кодом. Пробовали эти файлы прямо на сайте и по ссылкам. Также пробовал popper.js плюс bootstrap.min.js; тот же результат.
3. Прямые ссылки работают, а раскрывающаяся часть — нет. Щелчок по раскрывающемуся элементу ничего не дает. Было бы здорово, если бы он отображался при наведении курсора и оставался на месте, чтобы можно было нажимать подпункты.
4. Меню должно быть в правой части экрана; глядя на ответы, ms-auto должен это сделать. Это не.
5. Когда экран свернут до размера планшета или телефона, меню переходит к ожидаемому сжатому символу, но не работает вообще; при нажатии ничего не будет отображаться.

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:

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, ваша проблема сохраняется.

Источник

Выпадающее меню 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.

Обзор

Выпадающие элементы — это переключаемые, контекстные элементы поверхностного наложения для отображения списков ссылок и т.п. Они интерактивны благодаря плагину JavaScript в BS4. Функциональность toggle в выпадающих элементах запускается по клику, а не по наведению – это сделано умышленно.

Выпадающие элементы «построены» на сторонней библиотеке Popper.js, которая обеспечивает динамическое позиционирование и определение размера окна просмотра. Обязательно включите popper.min.js перед JavaScript Bootstrap или используйте bootstrap.bundle.min.js / bootstrap.bundle.js , который содержит Popper.js.

Если вы компилируете наши JS файлы, необходим util.js .

Доступность

Выпадающие элементы Bootstrap, с другой стороны, спроектированы для решения множества задач и могут работать в разных структурах разметки. Например, можно создать выпадающие элементы, содержащие дополнительные поля ввода и элементы контроля форм, такие как поиск или поле ввода логина. По этой причине BS4 не «ожидает» (и не добавляет автоматически) ни один из атрибутов ( role и aria- ), необходимых для меню согласно стандарту ARIA .

Однако Bootstrap всегда добавляет встроенную поддержку для большинства стандартных взаимодействий меню и клавиатуры, таких как возможность двигаться через отдельные элементы класса .dropdown-item кнопками курсора на клавиатуре и закрывать меню кнопкой ESC .

Примеры

Оберните «контролирующий» элемент (ссылку или кнопку) выпадающего элемента и выпадающее меню классом .dropdown или другим элементом с position: relative; . При необходимости выпадающие элементы можно запускать из элементов или .

Выпадающие элементы одинарных кнопок

Любую одинарную кнопку .btn можно превратить в «контролирующий» элемент (кнопка открытия\скрытия) при помощи некоторых изменений разметки. Вот как вы можете это сделать также и с элементами :

Самое забавное, что это можно сделать с любым из вариантов кнопок: «главная, вторичная, успех, инфо, предупреждение, опасность»:

Выпадающие элементы кнопок с разделенными зонами

По такому же принципу создавайте выпадающие элементы в кнопках с разделенными зонами, используя почти такую же разметку, как в пункте выше, но с добавлением класса .dropdown-toggle-split для правильного спейсинга вокруг выпадающего элемента.

Тут используется дополнительный класс, который уменьшает на 25% горизонтальный паддинг padding с обеих сторон выпадающей «каретки» и удаляет margin-left , добавленный для выпадающих элементов обычных кнопок. Эти изменения позволяют центрировать выпадающую «каретку» в разделенной кнопке и обеспечивают более подходящий размер «зоны клика» вблизи главной кнопки.

Размеры

Выпадающие элементы кнопок работают с кнопками любых размеров, включая кнопки по умолчанию и кнопки с выпадающими элементами с разделенными зонами.

«Выпадающий вверх»

Добавьте класс .dropup и выпадающий элемент будет «выпадать» вверх.

«Выпадающий вправо»

Добавьте класс .dropright и выпадающий элемент будет «выпадать» вправо.

«Выпадающий влево»

Добавьте класс .dropleft и выпадающий элемент будет «выпадать» влево.

Пункты меню

Исторически содержимым выпадающих элементов всегда были ссылки, но BS4 изменил это. Сейчас вы можете использовать в качестве содержимого выпадающих элементов , а не только .

Выравнивание меню

По умолчанию выпадающее меню автоматически расположено в 100% от вершины и на левой стороне родителя. Добавьте класс .dropdown-menu-right к элементу класса .dropdown-menu для выравнивания выпадающего меню по правой стороне.

Внимание! Выпадающие элементы позиционируются благодаря Popper.js (за исключением случаев, когда они содержатся в navbar).

Заголовки меню

Добавьте заголовок, чтобы обозначить секции действий любого выпадающего меню.

Dropdown header

Разделители меню

Разделяйте группы родственных элементов меню разделителем.

Формы меню

Расположите форму внутри выпадающего меню, и используйте утилиты паддинга или марджина для ее уплотнения.

Активные элементы меню

Добавьте класс .active к элементу выпадающего меню для его стилизации как «активированного».

Неактивные элементы меню

Добавьте класс .disabled к элементу выпадающего меню для его стилизации как «деактивированного».

Использование

Через атрибуты или JavaScript, плагин выпадающих элементов изменяет (показывает скрытоесодержимое) состояние содержимого (выпадающие меню) изменением класса .show элемента родительского списка. Атрибут data-toggle=»dropdown» отвечает за закрытие выпадающих меню на уровне приложения, так что будет неплохой идеей всегда использовать данный атрибут.

На устройствах, активируемых касанием, открытие выпадающего элемента добавляет пустые обработчики ( $.noop ) mouseover к непосредственным «детям» элемента . Этот, по общему мнению, некрасивый хак (без которого любое касание в iOS вне выпадающего элемента не закроет выпадающий элемент) необходим для обработки проблемы с делегированием событий в iOS. Как только выпадающий элемент закрыт, эти дополнительные пустые обработчики удаляются.

Через атрибуты

Добавьте к ссылке или кнопке атрибут data-toggle=»dropdown» для скрытия\показа выпадающего элемента.

Через JS

Управляйте выпадающими элементами с помощью JavaScript:

data-toggle=»dropdown» still required

Независимо от того, управляете вы выпадающим элементом через JavaScript или атрибутами, атрибут data-toggle=»dropdown» всегда необходим в элементе, запускающем выпадающий элемент.

Параметры

Передавайте параметры через JavaScript или атрибуты. Если используются атрибуты, добавляйте название параметра к data- как в data-offset=»» .

Название	Тип	По умолч.	Описание
offset	number | string | function	0	Смещение выпадающего элемента относительно его триггера. См. отступы Popper.js
flip	boolean	true	Позволяет выпадающему элементу «перевернуться», если произошло перекрытие другого элемента. Больше информации: flip docs.
boundary	string | element	‘scrollParent’	Граница ограничения переполнения выпадающего меню. Принимает значения ‘viewport’ , ‘window’ , ‘scrollParent’ или ссылку HTMLElement (только для JavaScript). Для получения дополнительной информации обратитесь к документации preventOverflow от Popper.js.

Обратите внимание, что если для boundary установлено значение, отличное от ‘scrollParent’ , позиция position: static применяется к контейнеру .dropdown .

Методы

Метод	Описание
$().dropdown(‘toggle’)	Задействует поведение toggle в выпадающем меню данного навбара или при навигации «TAB»ом.
$().dropdown(‘update’)	Обновляет позицию «выпадения» элемента.
$().dropdown(‘dispose’)	Уничтожает выпадающий элемент.

События

Все события выпадающих элементов наступают в родительском элементе класса .dropdown-menu и несут свойство relatedTarget , значение которого равно элементу «якоря» (ссылка, т.е. ), запускающего функциональность toggle.

Источник