Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Button-based navs not growing with fill/justified #33196

Closed
Kramb opened this issue Feb 24, 2021 · 2 comments · Fixed by #33213
Closed

Button-based navs not growing with fill/justified #33196

Kramb opened this issue Feb 24, 2021 · 2 comments · Fixed by #33213

Comments

@Kramb
Copy link
Contributor

Kramb commented Feb 24, 2021

OS: Windows 10 Pro v1909 build 18363.1256
Browser: Google Chrome v88.0.4324.182 & Mozilla Firefox v85.0.1
Summary: When creating a nav with nav-tabs or nav-pills in combination with nav-fill or nav-justified the tabs grow as expected along with any anchors with the nav-link class applied. If you attempt to apply the nav-link class to a button in the same scenario the tabs still grow but the buttons do not.
Use-case: Nav Pills/Tabs fill/justify issue

@mdo mdo changed the title Nav Pills/Tabs not growing with fill/justified Button-based navs not growing with fill/justified Feb 24, 2021
@ffoodd
Copy link
Member

ffoodd commented Feb 25, 2021

After a few researches, I learned that a button with display: block; won't get full width and this is in the specification.

The easiest workaround would be to mimic our old .btn-block class by explicitly adding width: 100%; to buttons, either through our .w-100 utility or by adding into our .nav-fill variant. I don't think any side-effect would appear. any opinion, @mdo?

@mdo
Copy link
Member

mdo commented Feb 25, 2021

Adding the style works for me! No need to require the utility here IMO.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants