Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

fill and justified do not work for items inside <b-navbar-nav>

See original GitHub issue

Describe the bug

According to this documentation <b-navbar-nav> has fill and justified properties, but they do not work - items inside <b-navbar-nav> are not filled or justified.

Expected behavior

Expect to have filled or justified items inside <b-navbar-nav>, but instead all items aligned to the left.

Versions

Libraries:

BootstrapVue: 2.0.0.rc11
Bootstrap: 4.3.1
Vue: 2.6.10

Environment:

Device: PC
OS: Ubuntu 19.04
Browser: Chrome 74.0.3729.169 (Official Build) (64-bit) and FireFox 67.0 (64-bit)

Demo link

https://codesandbox.io/s/bootstrap-vue-navbar-jusify-issue-oekpz

P.S. Probably right property within <b-nav-item-dropdown> should align items to the right. If so, seems it also does not work.

Issue Analytics

State:
Created 4 years ago
Comments:5 (5 by maintainers)

Top GitHub Comments

3reactions

tmorehousecommented, May 30, 2019

You may need to set a width for your navbar-nav, as I believe bootstrap CSS/SCSS sets it as an inline-block/flex element.

1reaction

TitanFightercommented, May 30, 2019

Also there is a markup mistake in your example:… did you mean to use <b-nav-item href="..."> for those four ones at the top?

Yes, forgot to change when was preparing the demo. Fixed.

Top Results From Across the Web

Bootstrap nav-justified doesn't take up full width - Stack Overflow

I understand what .nav-fill does. I want to understand what .nav-justified does and why isn't working as they say.

Navs - Bootstrap

To proportionately fill all available space with your .nav-item s, use .nav-fill . Notice that all horizontal space is occupied, but not every...

The Bootstrap 4 Nav (layout) Deconstructed - CodeProject

While implementing an Angular bases website, I wanted to make the navigation bar responsive. While trying things out with Bootstrap 4, ...

Navbar | Components - BootstrapVue

The following sub-components inside <b-navbar-nav> are supported: <b-nav-item> for link (and router-link) action items; <b-nav-item-dropdown> for nav ...

Nav - dbc docs - Dash Bootstrap Components - Faculty AI

It is only necessary to wrap NavLink with NavItem if you wish to use the fill or justified keyword arguments detailed below. If...