Refactor navbar dividers

* Instead of .divider-vertical, use .divider
* Makes use of .nav-divider mixin
* Dividers are horizontal to start, matching the default state of navbar nav links
* Dividers become vertical above 768px via media queries

3 files changed, 36 insertions, 25 deletions

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index d006d7160..01c603b26 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -8,7 +8,7 @@
  * Designed and built with all the love in the world by @mdo and @fat.
  */
 
-/*! normalize.css v2.0.1 | MIT License | git.io/normalize */
+/*! normalize.css v2.1.0 | MIT License | git.io/normalize */
 
 article,
 aside,
@@ -2531,7 +2531,7 @@ fieldset[disabled] .btn-link:hover {
 
 .dropdown-menu .divider {
   height: 1px;
-  margin: 9px 1px;
+  margin: 9px 0;
   overflow: hidden;
   background-color: #e5e5e5;
   border-bottom: 1px solid #ffffff;
@@ -2827,7 +2827,7 @@ button.close {
 
 .nav .divider {
   height: 1px;
-  margin: 9px 1px;
+  margin: 9px 0;
   overflow: hidden;
   background-color: #e5e5e5;
   border-bottom: 1px solid #ffffff;
@@ -3019,11 +3019,12 @@ button.close {
   margin-top: 3px;
 }
 
-.navbar .divider-vertical {
-  height: 30px;
-  margin: 10px 9px;
-  border-right: 1px solid #fbfbfb;
-  border-left: 1px solid #e1e1e1;
+.navbar .nav > .divider {
+  height: 1px;
+  margin: 9px 0;
+  overflow: hidden;
+  background-color: #e1e1e1;
+  border-bottom: 1px solid #fbfbfb;
 }
 
 .navbar-form {
@@ -3110,9 +3111,9 @@ button.close {
   background-color: #444;
 }
 
-.navbar-inverse .divider-vertical {
-  border-right-color: #2f2f2f;
-  border-left-color: #151515;
+.navbar-inverse .nav > .divider {
+  background-color: #151515;
+  border-bottom-color: #2f2f2f;
 }
 
 .navbar-inverse .nav li.dropdown.open > .dropdown-toggle,
@@ -3168,6 +3169,16 @@ button.close {
   .navbar .nav > li {
     float: left;
   }
+  .navbar .nav > .divider {
+    width: 1px;
+    height: 30px;
+    margin: 10px 9px;
+    border-right: 1px solid #fbfbfb;
+    border-bottom: 0;
+  }
+  .navbar-inverse .nav > .divider {
+    border-right-color: #2f2f2f;
+  }
   .navbar .btn-navbar {
     display: none;
   }
diff --git a/docs/components.html b/docs/components.html
index 4293e43bf..ade79e7b5 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -831,17 +831,17 @@
   <li><a href="#">Link</a></li>
 </ul>
 </pre>
-          <p>You can easily add dividers to your nav links with an empty list item and a simple class. Just add this between links:</p>
+          <p>You can easily add dividers to your nav links with an empty list item and a simple class. Just add the appropriate class to <code>&lt;li&gt;</code> elements between links. Dividers will be horizontal to start, but at resolutions above 768px they become vertical with the navigation.</p>
           <div class="bs-docs-example">
             <div class="navbar">
               <div class="navbar-inner">
                 <ul class="nav">
                   <li class="active"><a href="#">Home</a></li>
-                  <li class="divider-vertical"></li>
+                  <li class="divider"></li>
                   <li><a href="#">Link</a></li>
-                  <li class="divider-vertical"></li>
+                  <li class="divider"></li>
                   <li><a href="#">Link</a></li>
-                  <li class="divider-vertical"></li>
+                  <li class="divider"></li>
                 </ul>
               </div>
             </div>
@@ -849,7 +849,7 @@
 <pre class="prettyprint linenums">
 &lt;ul class="nav"&gt;
   ...
-  &lt;li class="divider-vertical"&gt;&lt;/li&gt;
+  &lt;li class="divider"&gt;&lt;/li&gt;
   ...
 &lt;/ul&gt;
 </pre>
@@ -999,7 +999,7 @@
                   </form>
                   <ul class="nav pull-right">
                     <li><a href="#">Link</a></li>
-                    <li class="divider-vertical"></li>
+                    <li class="divider"></li>
                     <li class="dropdown">
                       <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                       <ul class="dropdown-menu">
@@ -1080,7 +1080,7 @@
                   </form>
                   <ul class="nav pull-right">
                     <li><a href="#">Link</a></li>
-                    <li class="divider-vertical"></li>
+                    <li class="divider"></li>
                     <li class="dropdown">
                       <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                       <ul class="dropdown-menu">
diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index 7f8729487..3d0470bc5 100644
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -763,17 +763,17 @@
   &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
 </pre>
-          <p>You can easily add dividers to your nav links with an empty list item and a simple class. Just add this between links:</p>
+          <p>You can easily add dividers to your nav links with an empty list item and a simple class. Just add the appropriate class to <code>&lt;li&gt;</code> elements between links. Dividers will be horizontal to start, but at resolutions above 768px they become vertical with the navigation.</p>
           <div class="bs-docs-example">
             <div class="navbar">
               <div class="navbar-inner">
                 <ul class="nav">
                   <li class="active"><a href="#">Home</a></li>
-                  <li class="divider-vertical"></li>
+                  <li class="divider"></li>
                   <li><a href="#">Link</a></li>
-                  <li class="divider-vertical"></li>
+                  <li class="divider"></li>
                   <li><a href="#">Link</a></li>
-                  <li class="divider-vertical"></li>
+                  <li class="divider"></li>
                 </ul>
               </div>
             </div>
@@ -781,7 +781,7 @@
 <pre class="prettyprint linenums">
 &lt;ul class="nav"&gt;
   ...
-  &lt;li class="divider-vertical"&gt;&lt;/li&gt;
+  &lt;li class="divider"&gt;&lt;/li&gt;
   ...
 &lt;/ul&gt;
 </pre>
@@ -931,7 +931,7 @@
                   </form>
                   <ul class="nav pull-right">
                     <li><a href="#">Link</a></li>
-                    <li class="divider-vertical"></li>
+                    <li class="divider"></li>
                     <li class="dropdown">
                       <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                       <ul class="dropdown-menu">
@@ -1012,7 +1012,7 @@
                   </form>
                   <ul class="nav pull-right">
                     <li><a href="#">Link</a></li>
-                    <li class="divider-vertical"></li>
+                    <li class="divider"></li>
                     <li class="dropdown">
                       <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                       <ul class="dropdown-menu">