Overhaul navbar alignment (.pull-) utilities (fixes #9440)

Now navbars have their own float utility classes, mixin-ed versions of
`.pull-left` and `.pull-right`.

* Removed chained `.navbar-nav.pull-right`
* Added `.navbar-left` and `.navbar-right` as mixins of the default
float utilities, but only above the `@grid-float-breakpoint` to match
the new navbar behavior
* Updated components docs to match the new changeas
* Added callout about component alignment here to explain the new
classes

components.html

@@ -1128,13 +1128,13 @@ base_url: "../"
               </ul>
             </li>
           </ul>
-          <form class="navbar-form pull-left" role="search">
+          <form class="navbar-form navbar-left" role="search">
             <div class="form-group">
               <input type="text" class="form-control" placeholder="Search">
             </div>
             <button type="submit" class="btn btn-default">Submit</button>
           </form>
-          <ul class="nav navbar-nav pull-right">
+          <ul class="nav navbar-nav navbar-right">
             <li><a href="#">Link</a></li>
             <li class="dropdown">
               <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
@@ -1179,13 +1179,13 @@ base_url: "../"
         </ul>
       </li>
     </ul>
-    <form class="navbar-form pull-left" action="" role="search">
+    <form class="navbar-form navbar-left" action="" role="search">
       <div class="form-group">
         <input type="text" class="form-control" placeholder="Search">
       </div>
       <button type="submit" class="btn btn-default">Submit</button>
     </form>
-    <ul class="nav navbar-nav pull-right">
+    <ul class="nav navbar-nav navbar-right">
       <li><a href="#">Link</a></li>
       <li class="dropdown">
         <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
@@ -1282,7 +1282,8 @@ base_url: "../"
 {% endhighlight %}
 
     <h3 id="navbar-component-alignment">Component alignment</h3>
-    <p>Align nav links, forms, buttons, or text, using the <code>.pull-left</code> or <code>.pull-right</code> utility classes. Both classes will add a CSS float in the specified direction. To align nav links, put them in a separate <code>&lt;ul&gt;</code> with the respective utility class applied.</p>
+    <p>Align nav links, forms, buttons, or text, using the <code>.navbar-left</code> or <code>.navbar-right</code> utility classes. Both classes will add a CSS float in the specified direction. For example, to align nav links, put them in a separate <code>&lt;ul&gt;</code> with the respective utility class applied.</p>
+    <p>These classes are mixin-ed versions of <code>.pull-left</code> and <code>.pull-right</code>, but they're scoped to media queries for easier handling of navbar components across device sizes.</p>
 
 
     <h2>Optional display variations</h2>

dist/css/bootstrap.css

@@ -3309,10 +3309,6 @@ button.close {
   background-color: transparent;
 }
 
-.navbar-nav.pull-right {
-  width: 100%;
-}
-
 @media (max-width: 767px) {
   .navbar-nav .open .dropdown-menu {
     position: static;
@@ -3351,11 +3347,21 @@ button.close {
   }
 }
 
+@media (min-width: 768px) {
+  .navbar-left {
+    float: left !important;
+  }
+  .navbar-right {
+    float: right !important;
+  }
+}
+
 .navbar-form {
-  width: 100%;
   padding: 10px 15px;
   margin-top: 8px;
+  margin-right: -15px;
   margin-bottom: 8px;
+  margin-left: -15px;
   border-top: 1px solid #e6e6e6;
   border-bottom: 1px solid #e6e6e6;
 }
@@ -3394,6 +3400,8 @@ button.close {
     width: auto;
     padding-top: 0;
     padding-bottom: 0;
+    margin-right: 0;
+    margin-left: 0;
     border: 0;
   }
 }
@@ -3525,6 +3533,9 @@ button.close {
 }
 
 @media (max-width: 767px) {
+  .navbar-inverse .navbar-nav .open .dropdown-menu > .dropdown-header {
+    border-color: #080808;
+  }
   .navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
     color: #999999;
   }
@@ -3560,9 +3571,6 @@ button.close {
     padding-top: 15px;
     padding-bottom: 15px;
   }
-  .navbar-nav.pull-right {
-    width: auto;
-  }
   .navbar-toggle {
     position: relative;
     top: auto;

less/navbar.less

@@ -205,12 +205,6 @@
     }
   }
 
-  // Right aligned contents
-  // Make them full width first so that they align properly on mobile
-  &.pull-right {
-    width: 100%;
-  }
-
   @media (max-width: @screen-phone-max) {
     // Dropdowns get custom display
     .open .dropdown-menu {
@@ -257,13 +251,26 @@
 }
 
 
+// Component alignment
+//
+// Repurpose the pull utilities as their own navbar utilities to avoid specifity
+// issues with parents and chaining. Only do this when the navbar is uncollapsed
+// though so that navbar contents properly stack and align in mobile.
+
+@media (min-width: @grid-float-breakpoint) {
+  .navbar-left  { .pull-left(); }
+  .navbar-right { .pull-right(); }
+}
+
+
 // Navbar form
 //
 // Extension of the `.form-inline` with some extra flavor for optimum display in
 // our navbars.
 
 .navbar-form {
-  width: 100%; // Counteract the float from `.pull-` classes
+  margin-left: -@navbar-padding-horizontal;
+  margin-right: -@navbar-padding-horizontal;
   padding: 10px @navbar-padding-horizontal;
   border-top: 1px solid darken(@navbar-bg, 7%);
   border-bottom: 1px solid darken(@navbar-bg, 7%);
@@ -284,6 +291,8 @@
   @media (min-width: @grid-float-breakpoint) {
     width: auto;
     border: 0;
+    margin-left: 0;
+    margin-right: 0;
     padding-top: 0;
     padding-bottom: 0;
   }
@@ -435,6 +444,9 @@
     @media (max-width: @screen-phone-max) {
       // Dropdowns get custom display
       .open .dropdown-menu {
+        > .dropdown-header {
+          border-color: @navbar-inverse-border;
+        }
         > li > a {
           color: @navbar-inverse-link-color;
           &:hover,
@@ -485,10 +497,6 @@
         padding-bottom: ((@navbar-height - @line-height-computed) / 2);
       }
     }
-
-    &.pull-right {
-      width: auto;
-    }
   }
 
   // Required to make the collapsing navbar work on regular desktops