Btn block не работает

Бутстрап btn-блок не работает

Я пытаюсь развернуть кнопку отправки, чтобы она соответствовала размеру поля пароля. Я использую код btn-block, но он не работает.

12 ответов

В Bootstrap 5.0.x, btn-block обесценивается, и чтобы получить кнопку полной ширины, вы можете использовать систему сеток и использовать col-12 в классе кнопки.

Люди из гугла, просто добавьте w-100 к вашей кнопке, чтобы сделать ее полной шириной (способ btn-block раньше работал):

Работает после добавления w-100 в класс кнопки.

У меня была такая же проблема, но мой btn-block не работал в модальном. Это было потому, что кнопка была в нижнем колонтитуле начальной загрузки. Как только я перенес его на тело модала, все заработало. Я надеюсь, что это может кому-то помочь.

Используйте «col-12» или «w-100». Оба будут работать при создании кнопки на всю ширину относительно контейнера.

btn-block относятся к их родительскому элементу ( div с ), размер которого соответствует слову Entrar.

Итак, удалите их div (div с ), а Button с btn-block может иметь тот же размер, что и поле пароля.

У меня была та же проблема, когда btn-block не работал в bootstrap 4, в модальном теле. Проблема заключалась в том, что он был внутри в столбце

Для решения вышесказанного, вы должны добавить col класс к buttonHolder или заменить buttonHolder с коль completely

Источник

Выпадающее меню 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. Если вы вставляете их внутри тега тела, то ваша проблема сохраняется.

Источник

Бутстрап btn-блок не работает

Я пытаюсь развернуть кнопку отправки, чтобы она соответствовала размеру поля пароля. Я использую код btn-block, но он не работает.

12 ответов

В Bootstrap 5.0.x, btn-block обесценивается, и чтобы получить кнопку полной ширины, вы можете использовать систему сеток и использовать col-12 в классе кнопки.

Люди из гугла, просто добавьте w-100 к вашей кнопке, чтобы сделать ее полной шириной (способ btn-block раньше работал):

Работает после добавления w-100 в класс кнопки.

У меня была такая же проблема, но мой btn-block не работал в модальном. Это было потому, что кнопка была в нижнем колонтитуле начальной загрузки. Как только я перенес его на тело модала, все заработало. Я надеюсь, что это может кому-то помочь.

Используйте «col-12» или «w-100». Оба будут работать при создании кнопки на всю ширину относительно контейнера.

btn-block относятся к их родительскому элементу ( div с ), размер которого соответствует слову Entrar.

Итак, удалите их div (div с ), а Button с btn-block может иметь тот же размер, что и поле пароля.

У меня была та же проблема, когда btn-block не работал в bootstrap 4, в модальном теле. Проблема заключалась в том, что он был внутри в столбце

Для решения вышесказанного, вы должны добавить col класс к buttonHolder или заменить buttonHolder с коль completely

Источник

Сворачивание

Переключайте видимость контента в вашем проекте несколькими классами, нашим плагином переключения видимости и JavaScript.

Как работает

Плагин свертывания JavaScript используется для показа\скрытия контента. Кнопки или ссылки используются как триггеры, «нацеленные» на определенные элементы, которые надо скрыть\показать. Изменение состояния элемента происходит с помощью height — изменением его с текущего до 0 . В связи с тем, как CSS обрабатывает анимации, мы не можете использовать padding в элементе класса .collapse . Вместо padding используйте независимый «оборачивающий» элемент.

Примеры

Кликните по кнопке внизу, чтобы показать и скрыть элемент с помощью изменения его класса:

• .collapse скрывает содержимое
• .collapsing применяется во время переходов
• .collapse.show показывает содержимое

Вы можете использовать ссылку с атрибутом href или кнопку с атрибутом data-target . В обоих случаях требуется атрибут data-toggle=»collapse» .

Ссылка с атрибутом href Кнопка с атрибутом data-target

Взаимодействие со множественными объектами

Переключить первый элемент Переключить второй элемент Переключить оба элемента

Разворачиваемые панели

Используя компонент карточки, Вы можете расширить стандартное поведение сворачивания для создания аккордеона. Чтобы правильно добиться стиля аккордеона, обязательно используйте .accordion в качестве оболочки.

Сворачиваемый групповой элемент #1

Сворачиваемый групповой элемент #2

Сворачиваемый групповой элемент #3

Доступность

Добавьте aria-expanded к «контролирующему» элементу. Этот атрибут явно передает текущее состояние скрываемого элемента, привязанного к «контролирующему» элементу, «экранным читалкам» и прочим вспомогательным технологиям. Если скрываемый элемент скрыт по умолчанию, его aria-expanded должен быть «false» aria-expanded=»false» . Если раньше вы определяли скрываемый элемент показываемым по умолчанию через класс show , теперь используйте вместо этого класса aria-expanded=»true» в «контролирующем» элементе. Основываясь на том, показан или скрыт элемент, плагин будет автоматически переключать этот атрибут (через JavaScript либо через отслеживание клика по другому «контролирующему» элементу, связанному с данным скрываемым элементом). Если элемент HTML элемента управления не является кнопкой (например или

Дополнение: если ваш «контролирующий» элемент взаимодействует с одним скрываемым элементом – т.е. атрибут data-target указывает на # id – вы можете добавить дополнительный атрибут aria-controls к «контролирующему» элементу, содержащему # id этого скрываемого элемента.

Заметим, что текущая версия Bootstrap не работает с различными событиями взаимодействия с клавиатурой, описанными в WAI-ARIA Authoring Practices 1.1 accordion pattern — и вам потребуется подключить эти события с помощью обычного JavaScript.

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

Плагин «скрытия\показа» использует несколько классов для работы c даже «тяжелыми» элементами:

• .collapse прячет содержимое
• .collapse.show показывает содержимое
• .collapsing добавляется, когда переход начинается и удаляется с его завершением

Эти классы можно найти в _transitions.scss .

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

Добавьте в элемент атрибуты data-toggle=»collapse» и data-target для автоматического контроля одного или более скрываемых элементов. Атрибут data-target принимает CSS-селектор для применения к нему поведения toggle’a. Удостоверьтесь, что добавили в скрываемый элемент класс collapse . Если он должен быть показан по умолчанию, добавьте в него класс show .

Для добавления компактно расположенной (см. Разворачиваемые панели для экономии места) группы «контролирующих» элементов добавьте атрибут data-parent=»#selector» . Обратитесь к демо для просмотра в действии.

Через JavaScript

Параметры

Параметры можно передавать через атрибуты или JavaScript. Чтобы сделать это через атрибуты, добавьте имя параметра к data- , например data-parent=»» .

Имя	Тип	По умолч.	Описание
parent	selector | jQuery object | DOM element	false	Если есть родительский элемент, все скрываемые элементы под определенным «родителем» закроются, когда он открыт (как в «аккордеоне» — это зависит от класса card ). Атрибут нужно устанавливать в скрываемой зоне.
toggle	boolean	true	Взаимодействует с скрываемым элементом по обращению

Методы

Асинхронные методы и переходы

Все методы API асинхронны и запускают переход. Они возвращаются функции, вызвавшей их, с началом перехода, но до его конца. Плюс, вызов метода к компоненту, выполняющему переход, будет проигнорирован.

.collapse(options)

Задействует ваше содержимое как скрываемый элемент. Принимает object дополнительных опций.

.collapse(‘toggle’)

Задействует на скрываемом элементе функциональность toggle’а (hide\show). Возвращается к функции-вызову до того, как элемент показан или скрыт (т.е. до отработки событий shown.bs.collapse или hidden.bs.collapse event occurs).

.collapse(‘show’)

Показывает скрываемый элемент. Возвращается к функции-вызову до того, как элемент показан или скрыт (т.е. до отработки события shown.bs.collapse ).

.collapse(‘hide’)

Прячет скрываемый элемент. Возвращается к функции-вызову до того, как элемент показан или скрыт (т.е. до отработки события hidden.bs.collapse ).

.collapse(‘dispose’)

Уничтожает «коллпас» элемента.

События

Класс «коллапса» в Bootstrap содержит несколько событий для вовлечения, взаимодействия и связи иных событий JS с функциональностью «коллапса».

Источник