Address twbs#9873 and fix twbs#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
20111564 · Aug 27, 2013 · 4d23aa4 · 4d23aa4
1 parent 8f83a60
commit 4d23aa4
Show file tree

Hide file tree

Showing 6 changed files with 73 additions and 13 deletions.
diff --git a/components.html b/components.html
@@ -1243,7 +1243,11 @@ <h2 id="nav-pills">Pills</h2>
 
 
     <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>

diff --git a/dist/css/bootstrap.css b/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,

diff --git a/dist/css/bootstrap.min.css b/dist/css/bootstrap.min.css
diff --git a/examples/justified-nav/justified-nav.css b/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;

diff --git a/getting-started.html b/getting-started.html
@@ -224,7 +224,7 @@ <h4>Sticky footer with navbar</h4>
           <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/">

diff --git a/less/navs.less b/less/navs.less
@@ -159,28 +159,47 @@
     float: none;
      > a {
       text-align: center;
+      margin-bottom: 5px;
     }
   }
 
   @media (min-width: @screen-sm-min) {
     > li {
       display: table-cell;
       width: 1%;
+      > a {
+        margin-bottom: 0;
+      }
     }
   }
 }
 
 // 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;
+    }
   }
 }