From 4d23aa4ef50ac16fec9fbc12832ad99f362ac703 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 26 Aug 2013 17:37:52 -0700 Subject: [PATCH] Address #9873 and fix #9774 * Update styling of justified nav links to be more mobile friendly (with all four rounded corners and some margin between items) * Add note to docs to callout bogus WebKit rendering on component and example --- components.html | 6 ++- dist/css/bootstrap.css | 48 +++++++++++++++++++++--- dist/css/bootstrap.min.css | 2 +- examples/justified-nav/justified-nav.css | 1 + getting-started.html | 2 +- less/navs.less | 27 +++++++++++-- 6 files changed, 73 insertions(+), 13 deletions(-) diff --git a/components.html b/components.html index e4a1fdb7ee..36f7a23f91 100644 --- a/components.html +++ b/components.html @@ -1243,7 +1243,11 @@ base_url: "../" -

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 868aeb817c..27861f8f46 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; + } } } -- 2.47.2