Почему не работает active bootstrap

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

Подскажите, почему некоторые классы bootstrap отображают элементы не так как надо?

А ожидается такая картина:

Хотя с путями все в порядке, по-моему.

3 ответа 3

1) Bootstrap 2.3.2

Вы взяли код от второго Бутстрапа, а подключили третий. Со стилями от версии 2.3.2 выглядит как надо:

2) Bootstrap 3.3.7

Чтобы заработало с третьим Бутстрапом, поменяйте три вещи:

1. Как советует soledar10, задайте размер кнопок классами .btn-lg , .btn-sm и .btn-xs .
2. Как советует Byulent, подключите тему по умолчанию, чтобы на кнопках появились объём и тени.
3. И добавьте серым кнопкам класс .btn-default .

Попробуйте подключить bootstrap-theme.css ( bootstrap-theme.min.css ).

Да, и лучше использовать либо только полные файлы, либо только минифицированные.

Необходимо использовать классы с приставкой -lg , -sm , -xs

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

Похожие

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

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

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

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

Источник

Почему мой класс .sticky-top не работает в Bootstrap 4?

Я новичок в Bootstrap, пытаюсь сделать адаптивное меню. По какой-то причине наклейка не будет работать. Мой браузер его поддерживает, и, сравнивая мой код с другими работающими версиями, я просто не понимаю, почему он не работает. Я использую бутстрап 4.1.3.

Вот мой код; Я не знаю ни о каких возможных столкновениях с липкой вершиной.

5 ответов

Я не смог полностью решить эту проблему с помощью начальной загрузки. То, что предложил Цзячэнь Го, было только частичным решением, так как оно запрещает мне добавлять что-либо в шапку.

Я решил это, просто добавив JavaScript из w3schools: https://www.w3schools.com/howto/ howto_js_navbar_sticky.asp Это также позволяет больше настраивать. Так что это то, что я бы порекомендовал людям, имеющим проблемы с классом «липкий топ» в BS4.

Еще одна вещь, которую нужно проверить, это если у любого родительского элемента установлено одно из этих свойств css:

• переполнение
• Переполнение -й
• Переполнение — х

Если для этого свойства установлено одно из этих значений, оно НЕ будет работать: авто, скрыто, наложение, прокрутка.

Лучшее решение — удалить его или изменить его значение на «unset»

Какой браузер вы используете?

position: sticky не полностью поддерживается во всех браузерах.

В IE11 и IE10 будет отображать позицию: липкая, как позиция: относительная.

Updated: установить имя класса «sticky-top» в будет работать, потому что он относительно привязан к родительскому элементу, в данном случае это все тело HTML

В моем случае навигационная панель была в разделе, так что наклейка не работала. Таким образом, удаление навигационной панели из секции или создание липкой вершины секции работает!

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

В частности, ищите любое свойство переполнения, установленное на родительском объекте. Вы не можете использовать: overflow: hidden , overflow: scroll или overflow: auto в родительском элементе позиции: липкий элемент.

Если вы не используете переполнение и по-прежнему возникают проблемы, стоит проверить, установлена ли высота для родительского элемента? Это может ограничить липкое позиционирование, препятствуя его появлению. Уберите высоту и посмотрите, решит ли это проблему.

Источник