diff --git a/components.html b/components.html index e4a1fdb7eeca..36f7a23f915f 100644 --- a/components.html +++ b/components.html @@ -1243,7 +1243,11 @@ -

Easily make tabs or pills equal widths of their parent with .nav-justified.

+

Easily make tabs or pills equal widths of their parent at screens wider than 768px with .nav-justified. On smaller screens, the nav links are stacked.

+
+

WebKit and responsive justified navs

+

Chrome and Safari both exhibit a bug in which resizing your browser horizontally causes rendering errors in the justified nav that are cleared upon refreshing. This bug is also shown in the justified nav example.

+
diff --git a/less/navs.less b/less/navs.less index 868aeb817c36..27861f8f46fb 100644 --- a/less/navs.less +++ b/less/navs.less @@ -159,6 +159,7 @@ float: none; > a { text-align: center; + margin-bottom: 5px; } } @@ -166,6 +167,9 @@ > li { display: table-cell; width: 1%; + > a { + margin-bottom: 0; + } } } } @@ -173,14 +177,29 @@ // Move borders to anchors instead of bottom of list .nav-tabs-justified { border-bottom: 0; - > li > a { - border-bottom: 1px solid @nav-tabs-justified-link-border-color; + > li > a { // Override margin from .nav-tabs margin-right: 0; + border-radius: @border-radius-base; + } + + > .active > a, + > .active > a:hover, + > .active > a:focus { + border: 1px solid @nav-tabs-justified-link-border-color; } - > .active > a { - border-bottom-color: @nav-tabs-justified-active-link-border-color; + + @media (min-width: @screen-sm-min) { + > li > a { + border-bottom: 1px solid @nav-tabs-justified-link-border-color; + border-radius: @border-radius-base @border-radius-base 0 0; + } + > .active > a, + > .active > a:hover, + > .active > a:focus { + border-bottom-color: @nav-tabs-justified-active-link-border-color; + } } }