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

v4: Move negative margin-bottom from .nav-item to .nav-link #32211

Merged
merged 5 commits into from
Dec 10, 2020

Conversation

kyletsang
Copy link
Contributor

@kyletsang kyletsang commented Nov 19, 2020

This fix prevents the tab's bottom border from showing on the actively selected tab. This bug is only visible when using .nav-links as direct children of .nav-tabs.

This issue can be reproduced in the second docs example under this link: https://getbootstrap.com/docs/4.5/components/navs/#javascript-behavior

Here is an image showing before/after the fix.

image

Preview: https://deploy-preview-32211--twbs-bootstrap.netlify.app/docs/4.5/components/navs/#javascript-behavior

@kyletsang kyletsang requested a review from a team as a code owner November 19, 2020 19:40
Copy link
Member

@ffoodd ffoodd left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM.

@MartijnCuppens @mdo, any thoughts?

@mdo mdo changed the title v4: Fix bottom border in nav tabs v4: Move negative margin-bottom from .nav-item to .nav-link Dec 10, 2020
@XhmikosR XhmikosR merged commit 1897b4c into twbs:v4-dev Dec 10, 2020
@kyletsang kyletsang deleted the fix/nav-tabs-link-margin branch December 10, 2020 23:23
jrochkind added a commit to jrochkind/bootstrap4-responsive-tabs that referenced this pull request Sep 9, 2021
In Bootstrap 4.6.0, as a result of twbs/bootstrap#32211, the bottom border is not visible in the responsive-tab in small mode.

This fixes it.
jrochkind added a commit to jrochkind/bootstrap4-responsive-tabs that referenced this pull request Sep 9, 2021
In Bootstrap 4.6.0, as a result of twbs/bootstrap#32211, the bottom border is not visible in the responsive-tab in small mode.

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

Successfully merging this pull request may close these issues.

4 participants