Navbar right bootstrap 4 не работает

Выпадающее меню 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 with left, center or right aligned items

In Bootstrap, what is the most platform-friendly way to create a navigation bar that has Logo A on the left, menu items in the center, and Logo B on the right?

Here is what I’ve tried so far, and it ends up being aligned so that Logo A is on the left, menu items next to the logo on the left and Logo B on the right.

11 Answers 11

2021 Update

Bootstrap 5 (beta)

Bootstrap 5 also has a flexbox Navbar, and introduces new RTL support. For this reason the concept of «left» and «right» has been replaced with «start» and «end». Therefore the margin utilities changed for Bootstrap 5 beta:

Also note that data-toggle and data-target have changed too:

• data-toggle => data-bs-toggle
• data-target => data-bs-target

Bootstrap 4

The flexbox, auto-margins, and ordering utility classes can be used to align Navbar content as needed. There are many things to consider including the order and alignment of Navbar items (brand, links, toggler) on both large screens and the mobile/collapsed views. Don’t use the grid classes (row,col) for the Navbar.

Here are various examples.

Left, center(brand) and right links:

Or, these other Bootstrap 4 alignment scenarios:

More Bootstrap 4 examples:

Bootstrap 3

Option 1 — Brand center, with left/right nav links:

Option 2 — Left, center and right nav links:

Option 3 — Center both brand and links

More examples:

For 3.x also see nav-justified: Bootstrap center navbar

Bootstrap 4

We have many ways to align navBars Items.

For Left Align

class = «navbar-nav mr-auto«

For Right Align

class = «navbar-nav ml-auto«

For Center Align

class = «navbar-nav mx-auto«

I needed something similar (left, center and right aligned items), but with ability to mark centered items as active. What worked for me was:

Bootstrap 4 (as of alpha 6)

Navbars are built with flexbox! Instead of floats, you’ll need flexbox and margin utilities.

For Align Right use justify-content-end on the collapse div:

Smack my head, just reread my answer and realized the OP was asking for two logo’s one on the left one on the right with a center menu, not the other way around.

This can be accomplished strictly in the HTML by using Bootstrap’s «navbar-right» and «navbar-left» for the logos and then «nav-justified» instead of «navbar-nav» for your UL. No addtional CSS needed (unless you want to put the navbar-collapse toggle in the center in the xs viewport, then you need to override a bit, but will leave that up to you).

For those who got here trying to center the «brand» here is my old answer:

I know this thread is a little old, but just to post my findings when working on this. I decided to base my solution on skelly’s answer since tomaszbak’s breaks on collaspe. First I created my «navbar-center» and turned off float for the normal navbar in my CSS:

However the issue with skelly’s answer is if you have a really long brand name (or you wanted to use an image for your brand) then once you get to the the sm viewport there could be overlapping due to the absolute position and as the commenters have said, once you get to the xs viewport the toggle switch breaks (unless you use Z positioning but I really didn’t want to have to worry about it).

So what I did was utilize the bootstrap responsive utilities to create multiple version of the brand block:

So now the lg and md viewports have the brand centered with links to the left and right, once you get to the sm viewport your links drop to the next line so that you don’t overlap with your brand, and then finally at the xs viewport the collaspe kicks in and you are able to use the toggle. You could take this a step further and modify the media queries for the navbar-right and navbar-left when used with navbar-brand so that in the sm viewport the links are all centered but didn’t have the time to vet it out.

You can check my old bootply here: www.bootply.com/n3PXXropP3

I guess having 3 brands might be just as much hassle as the «z» but I feel like in the world of responsive design this solution fits my style better.

Источник

CSS float-right not working in Bootstrap 4 Navbar [duplicate]

I’m trying to get my nav links to float to the right of my navbar, but I can’t get it to work. I’ve tried using the «.float-right», «float-xs-right», and «justify-content-end» bootstrap 4 class, along with using «float: right !important;» in my CSS file, and it still won’t work.

Here is the HTML for the navbar of my website:

And here is the CSS:

I’m relatively new to the Bootstrap 4 framework, so it’s possible that I might just be making a dumb mistake, but hopefully someone can help me. 🙁

3 Answers 3

Bootstrap 5 (update 2021)

The Bootstrap 5 Navbar still uses flexbox, but the concept of right and left, have changed to start and end for new RTL support. Therefore, the class names have changed.

BUT, remember floats don’t work with flexbox. The best approach for right alignment in the Navbar is to use ms-auto (margin-left: auto) or justify-content-end .

Bootstrap 4

The original answer no longer works in Bootstrap 4, and it’s not good practice to use Bootstrap’s .row in the navbar component. The .row should only be used for grid columns.

Now that Bootstrap 4 is flexbox, one way to align navbar components is using the auto-margin utility classes, such as ml-auto which is a shortcut for CSS margin-left:auto . This can be used to push the nav to the right.

Or the flexbox utils like justify-content-between can be used on the container inside the navbar.

Just notice that in this case justify-content-between works because there are only 2 navbar components (navbar-brand and nav).

Источник

Bootstrap 4 выровнять элементы навигационной панели справа

Как выровнять элемент navbar вправо?

я хочу иметь логин и зарегистрировать права. Но все, что я пытаюсь, кажется, не работает.

это то, что я пробовал до сих пор:

это мой код:

18 ответов:

Bootstrap 4 и много различные способы выравнивания элементов navbar. float-right не будет работать, потому что navbar теперь flexbox .

можно использовать mr-auto для автомобиля справа на 1-й (слева) navbar-nav . как вариант, ml-auto может использоваться на 2-й (справа) navbar-nav , или если у вас есть только один navbar-nav .

есть также Flexbox utils. В этом случае, у вас есть 2 navbar-nav С, justify-content-between in navbar-collapse будет работать даже пространство между ними,

обновление для Bootstrap 4.0 и новее

начиная с Bootstrap 4 beta, ml-auto будет по-прежнему работать, чтобы подтолкнуть элементы вправо. Просто знайте, что navbar-toggleable- классы изменились navbar-expand-*

другой частый Bootstrap 4 Navbar right alignment сценарий включает в себя кнопку справа, что остается вне мобильного развал nav так, что он всегда отображается на всех ширинах.

в моем случае, я хотел только один набор кнопок навигации / опций и обнаружил, что это будет работать:

Итак, вы добавите justify-content-end в div и опустить mr-auto в списке.

On Bootsrap 4.0.0-beta.2 , ни один из ответов, перечисленных здесь, не работал для меня. Наконец, сайт Bootstrap дал мне решение, не через его doc, а через его исходный код страницы.

Getbootstrap.com выровняйте их справа navbar-nav вправо с помощью следующего класса: ml-md-auto .

для тех, кто все еще борется с этой проблемой в BS4 просто попробуйте ниже кода —

Если вы хотите выровнять бренд слева и все элементы navbar-справа, измените значение по умолчанию mr-auto to ml-auto

использовать ml-auto вместо mr-auto после применения nav оправдать-содержание-конец ul

используйте класс flex-row-reverse

Источник