Merge pull request #18741 from bassjobsen/patch-15

fix justified navbar

2 files changed, 39 insertions, 17 deletions

diff --git a/docs/examples/justified-nav/index.html b/docs/examples/justified-nav/index.html
index 3fe6e29f4..a757a5c9a 100644
--- a/docs/examples/justified-nav/index.html
+++ b/docs/examples/justified-nav/index.html
@@ -28,12 +28,12 @@
         <h3 class="text-muted">Project name</h3>
         <nav>
           <ul class="nav nav-justified">
-            <li class="active"><a href="#">Home</a></li>
-            <li><a href="#">Projects</a></li>
-            <li><a href="#">Services</a></li>
-            <li><a href="#">Downloads</a></li>
-            <li><a href="#">About</a></li>
-            <li><a href="#">Contact</a></li>
+            <li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
+            <li class="nav-item"><a class="nav-link" href="#">Projects</a></li>
+            <li class="nav-item"><a class="nav-link" href="#">Services</a></li>
+            <li class="nav-item"><a class="nav-link" href="#">Downloads</a></li>
+            <li class="nav-item"><a class="nav-link" href="#">About</a></li>
+            <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
           </ul>
         </nav>
       </div>
@@ -67,7 +67,7 @@
 
       <!-- Site footer -->
       <footer class="footer">
-        <p>&copy; Company 2014</p>
+        <p>&copy; Company 2016</p>
       </footer>
 
     </div> <!-- /container -->
diff --git a/docs/examples/justified-nav/justified-nav.css b/docs/examples/justified-nav/justified-nav.css
index 31e25e143..48ac07a9b 100644
--- a/docs/examples/justified-nav/justified-nav.css
+++ b/docs/examples/justified-nav/justified-nav.css
@@ -19,6 +19,29 @@ body {
   font-size: 21px;
 }
 
+/* add .nav-justified, see: https://github.com/twbs/bootstrap/issues/18653 */
+.nav-justified {
+  width: 100%;
+}
+.nav-item {
+  float: none;
+}
+.nav-link {
+  text-align: center;
+  margin-bottom: 5px;
+  width: 100%;
+}
+
+@media (min-width: 768px) {
+   .nav-item {
+    display: table-cell;
+    width: 1%;
+  }
+  .nav-link {
+    margin-bottom: 0;
+  }
+}
+
 /* Customize the nav-justified links to be fill the entire space of the .navbar */
 
 .nav-justified {
@@ -26,7 +49,7 @@ body {
   border: 1px solid #ccc;
   border-radius: 5px;
 }
-.nav-justified > li > a {
+.nav-link {
   padding-top: 15px;
   padding-bottom: 15px;
   margin-bottom: 0;
@@ -45,19 +68,18 @@ body {
   background-repeat: repeat-x; /* Repeat the gradient */
   border-bottom: 1px solid #d5d5d5;
 }
-.nav-justified > .active > a,
-.nav-justified > .active > a:hover,
-.nav-justified > .active > a:focus {
+.nav-link.active,
+.nav-link.active:hover,
+.nav-link.active:focus {
   background-color: #ddd;
   background-image: none;
   -webkit-box-shadow: inset 0 3px 7px rgba(0,0,0,.15);
           box-shadow: inset 0 3px 7px rgba(0,0,0,.15);
 }
-.nav-justified > li:first-child > a {
+.nav-item:first-child .nav-link {
   border-radius: 5px 5px 0 0;
 }
-.nav-justified > li:last-child > a {
-  border-bottom: 0;
+.nav-item:last-child .nav-link {
   border-radius: 0 0 5px 5px;
 }
 
@@ -65,15 +87,15 @@ body {
   .nav-justified {
     max-height: 52px;
   }
-  .nav-justified > li > a {
+  .nav-link {
     border-right: 1px solid #d5d5d5;
     border-left: 1px solid #fff;
   }
-  .nav-justified > li:first-child > a {
+  .nav-item:first-child .nav-link {
     border-left: 0;
     border-radius: 5px 0 0 5px;
   }
-  .nav-justified > li:last-child > a {
+  .nav-item:last-child .nav-link {
     border-right: 0;
     border-radius: 0 5px 5px 0;
   }