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

@@ -1243,7 +1243,11 @@ base_url: "../"
 
 
     <h2 id="nav-justified">Justified</h2>
-    <p>Easily make tabs or pills equal widths of their parent with <code>.nav-justified</code>.</p>
+    <p>Easily make tabs or pills equal widths of their parent at screens wider than 768px with <code>.nav-justified</code>. On smaller screens, the nav links are stacked.</p>
+    <div class="bs-callout bs-callout-warning">
+      <h4>WebKit and responsive justified navs</h4>
+      <p>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 <a href="../examples/justified-nav/">justified nav example</a>.</p>
+    </div>
     <div class="bs-example">
       <ul class="nav nav-tabs nav-justified">
         <li class="active"><a href="#">Home</a></li>

dist/css/bootstrap.css

@@ -3899,6 +3899,7 @@ textarea.input-group-sm > .input-group-btn > .btn {
 }
 
 .nav-tabs.nav-justified > li > a {
+  margin-bottom: 5px;
   text-align: center;
 }
 
@@ -3907,15 +3908,32 @@ textarea.input-group-sm > .input-group-btn > .btn {
     display: table-cell;
     width: 1%;
   }
+  .nav-tabs.nav-justified > li > a {
+    margin-bottom: 0;
+  }
 }
 
 .nav-tabs.nav-justified > li > a {
   margin-right: 0;
-  border-bottom: 1px solid #dddddd;
+  border-radius: 4px;
 }
 
-.nav-tabs.nav-justified > .active > a {
-  border-bottom-color: #ffffff;
+.nav-tabs.nav-justified > .active > a,
+.nav-tabs.nav-justified > .active > a:hover,
+.nav-tabs.nav-justified > .active > a:focus {
+  border: 1px solid #dddddd;
+}
+
+@media (min-width: 768px) {
+  .nav-tabs.nav-justified > li > a {
+    border-bottom: 1px solid #dddddd;
+    border-radius: 4px 4px 0 0;
+  }
+  .nav-tabs.nav-justified > .active > a,
+  .nav-tabs.nav-justified > .active > a:hover,
+  .nav-tabs.nav-justified > .active > a:focus {
+    border-bottom-color: #ffffff;
+  }
 }
 
 .nav-pills > li {
@@ -3955,6 +3973,7 @@ textarea.input-group-sm > .input-group-btn > .btn {
 }
 
 .nav-justified > li > a {
+  margin-bottom: 5px;
   text-align: center;
 }
 
@@ -3963,6 +3982,9 @@ textarea.input-group-sm > .input-group-btn > .btn {
     display: table-cell;
     width: 1%;
   }
+  .nav-justified > li > a {
+    margin-bottom: 0;
+  }
 }
 
 .nav-tabs-justified {
@@ -3971,11 +3993,25 @@ textarea.input-group-sm > .input-group-btn > .btn {
 
 .nav-tabs-justified > li > a {
   margin-right: 0;
-  border-bottom: 1px solid #dddddd;
+  border-radius: 4px;
 }
 
-.nav-tabs-justified > .active > a {
-  border-bottom-color: #ffffff;
+.nav-tabs-justified > .active > a,
+.nav-tabs-justified > .active > a:hover,
+.nav-tabs-justified > .active > a:focus {
+  border: 1px solid #dddddd;
+}
+
+@media (min-width: 768px) {
+  .nav-tabs-justified > li > a {
+    border-bottom: 1px solid #dddddd;
+    border-radius: 4px 4px 0 0;
+  }
+  .nav-tabs-justified > .active > a,
+  .nav-tabs-justified > .active > a:hover,
+  .nav-tabs-justified > .active > a:focus {
+    border-bottom-color: #ffffff;
+  }
 }
 
 .tabbable:before,

examples/justified-nav/justified-nav.css

@@ -27,6 +27,7 @@ body {
   border: 1px solid #ccc;
 }
 .nav-justified > li > a {
+  margin-bottom: 0;
   padding-top: 15px;
   padding-bottom: 15px;
   color: #777;

getting-started.html

@@ -224,7 +224,7 @@ bootstrap/
           <img src="../examples/screenshots/justified-nav.jpg" alt="">
         </a>
         <h4>Justified nav</h4>
-        <p>Expand on the default navbar and more to create justified navigation links.</p>
+        <p>Create a custom navbar with justified links. Heads up! <a href="../components/#nav-justified">Not too WebKit friendly.</a></p>
       </div>
       <div class="col-xs-6 col-md-4">
         <a class="thumbnail" href="../examples/offcanvas/">

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 {
-    border-bottom-color: @nav-tabs-justified-active-link-border-color;
+
+  > .active > a,
+  > .active > a:hover,
+  > .active > a:focus {
+    border: 1px solid @nav-tabs-justified-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;
+    }
   }
 }