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

1 files changed, 23 insertions, 4 deletions

diff --git a/less/navs.less b/less/navs.less
index 868aeb817..27861f8f4 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;
+    }
   }
 }