Bootstrap не работает select

Проблема с bootstrap-select

При добавлении bootstrap.min.css меняется дизайн шаблона, можно что то сделать?

При добавлении этих файлов

2 ответа 2

Добрый день, это связано с конфликтом названий ваших классов и классов bootstrap’а. При помощи инструментов разработчика (f12 в браузере) справа можно посмотреть какие свойства css перезаписываются и что идет не так. Без демки сложно сказать.

Переименуйте класс selectpicker . это класс bootstrap select, так что если не хотите, что применялся стиль из библиотеки, то имя класса должно быт уникальным.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками html или задайте свой вопрос.

Похожие

Подписаться на ленту

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

дизайн сайта / логотип © 2021 Stack Exchange Inc; материалы пользователей предоставляются на условиях лицензии cc by-sa. rev 2021.10.15.40479

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Источник

Bootstrap-select not working

I’m using bootstrap 2.3.2 and want to implement element to look like dropdown-menu. There is a solution in github: https://github.com/silviomoreto/bootstrap-select

It doesn’t work. But when i type

in console in Chrome DevTools — select changes to dropdown and it works.

7 Answers 7

You need to call the initialising function after the DOM is ready. This is usually done as part of a $(document).ready() function block.

When you are attempting the command via the console, the DOM is already loaded and available. As such the call works. The above code sample should work similarly.

After 1 year I had the same issue. This worked for me:

2-CSS, inside head tag->2files

3-Js files, at the end before close body tag.

Make sure bootstrap-select.js or bootstrap-select.min.js is included before loading your code.

Should work fine

There will be some reasons that it will not work.

Reason 1:
if bootstrap-select.css take time to load, then already the loaded jquery command like $(document).ready(function () <>) will don’t know the function so it will throw an error.

solution: So,inorder to overcome this just give $(‘your selector’).selectpicker(); in between the script tag at the end of html code with out any jquery ready function. for sure it will work

Have the same issue, this (set default size) helped me. Without settings menu is not showing.

The size option is set to ‘auto’ by default. When size is set to ‘auto’, the menu always opens up to show as many items as the window will allow without being cut off. Set size to false to always show all items. The size of the menu can also be specifed using the data-size attribute. http://silviomoreto.github.io/bootstrap-select/

ADDED: Also don’t forget about bootsrap version, I search around and found that this plugin works with 2.3.2 bootstrap version at official page it has such link. So I think i can be trouble too.

Источник

Выпадающее меню 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 select не работает

У меня есть что-то вроде этого:

Добавление этого (в нижней части страницы после загрузки приведенного выше скрипта) не работает:

Прямо сейчас кнопка форматируется, но нажатие кнопки select не загружает выпадающий список. Нажатие alt загружает выпадающий список, но нет никакого способа закрыть его, даже если я выберу опцию.

У кого-нибудь есть какие-нибудь идеи о том, почему это происходит?

5 ответов

Я хочу добавить multi select в свое приложение, но когда я пытаюсь загрузить данные из контроллера, select не работает. Я использовал ng-options и ng-repeat в select, но оба они не работают. Мой плагин: bootstrap-select Мой код в jsbin

Bootstrap select search не работает. Может быть, есть какая-то мелочь, которую я упускаю. Я использую bootstrap select, который работает fine.Select опций, поступающих из database.added data-live-search=true для поиска, который не является working.Select выпадающим списком, не открывающимся. Код.

Попробуйте загрузить скрипт в головной раздел страницы, и это » $(‘.selectpicker’) .selectpicker(); » в нижней части страницы

Ваша структура будет

Вы можете использовать этот скрипт под всеми js:-

Если вы столкнулись с какой-либо ошибкой, вы можете использовать:-

Попробуйте добавить bootstrap-select.js после сценариев начальной загрузки по умолчанию и jquery в нижнем колонтитуле — это сработало для меня.

Убедитесь, что вы разместили это в верхней части страницы. Вы хотите использовать bootstrap Select

и проверьте путь к файлам, чтобы убедиться в его правильности. это должно сработать.

с уважением Кианоор

У меня была та же проблема

Исправлено путем вызова bootstrap js

Перед кнопкой Выберите js

Похожие вопросы:

Я использую bootstrap-select , и все работает нормально, пока параметры моего тега select не будут заполнены данными из файла php. Я видел каждый пост на эту тему, но ответа нет. Итак, вот пример.

Я хочу стилизовать свои формы веб-сайта, входные данные и выбор. Я использовал Bootstrap для входных данных и Bootstrap-select для выбора и iCheck для флажков. Проблема в том, что iCheck неправильно.

Я работаю над ruby на rails приложении и пытаюсь уменьшить размер select. У меня установлен ‘bootstrap gem’ для моего приложения. Вот код на моей веб-странице. Эти два выпадающих списка зависят друг от друга. Предположим,если я выберу option1 в первом выпадающем списке, то option1 будет отключен во.

У меня есть форма с несколькими полями ввода и меню выбора. Я использую bootstrap select plugin для выбора меню. Ссылка так что я просто завершил все дела и применил bootstrap validation с помощью.

Я использую MDBootstrap в одном из своих проектов. Я не являюсь премиум-пользователем MDB . Поэтому я не могу использовать MDB Select . Но Bootstrap Select не работает идеально внутри MDB . Вот.

Источник