Fixes #10370: Improved and deprecated dropdown menu alignment options

* Removes an old pair of selectors that didn’t properly target the
right-aligned navbar alignment of dropdown menus.
* Deprecates the `.pull-right` alignment in favor of a more specific
and unique class name.
* Adds `.dropdown-menu-right` as the new alignment class. This is then
mixin-ed into the `.navbar-right.navbar-nav` dropdown menus for
auto-alignment.
* To override that auto-alignment, use `.dropdown-menu-left` as needed.

components.html

@@ -902,9 +902,13 @@ base_url: "../"
 {% endhighlight %}
 
     <h3 id="dropdowns-alignment">Alignment options</h3>
-    <p>Add <code>.pull-right</code> to a <code>.dropdown-menu</code> to right align the dropdown menu.</p>
+    <p>Add <code>.dropdown-menu-right</code> to a <code>.dropdown-menu</code> to right align the dropdown menu.</p>
+    <div class="bs-callout bs-callout-warning">
+      <h4>Deprecated <code>.pull-right</code> alignment</h4>
+      <p>As of v3.1, we've deprecated <code>.pull-right</code> on dropdown menus. To right-align a menu, use <code>.dropdown-menu-right</code>. Right-aligned nav components in the navbar use a mixin version of this class to automatically align the menu. To override it, use <code>.dropdown-menu-left</code>.</p>
+    </div>
 {% highlight html %}
-<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dLabel">
+<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dLabel">
   ...
 </ul>
 {% endhighlight %}

dist/css/bootstrap.css

@@ -2965,6 +2965,14 @@ input[type="button"].btn-block {
 .open > a {
   outline: 0;
 }
+.dropdown-menu-right {
+  right: 0;
+  left: auto;
+}
+.dropdown-menu-left {
+  right: auto;
+  left: 0;
+}
 .dropdown-header {
   display: block;
   padding: 3px 20px;
@@ -3001,6 +3009,10 @@ input[type="button"].btn-block {
     right: 0;
     left: auto;
   }
+  .navbar-right .dropdown-menu-left {
+    right: auto;
+    left: 0;
+  }
 }
 .btn-group,
 .btn-group-vertical {
@@ -3776,11 +3788,6 @@ textarea.input-group-sm > .input-group-btn > .btn {
   border-bottom-right-radius: 0;
   border-bottom-left-radius: 0;
 }
-.navbar-nav.pull-right > li > .dropdown-menu,
-.navbar-nav > li > .dropdown-menu.pull-right {
-  right: 0;
-  left: auto;
-}
 .navbar-btn {
   margin-top: 8px;
   margin-bottom: 8px;

less/dropdowns.less

@@ -46,6 +46,8 @@
   background-clip: padding-box;
 
   // Aligns the dropdown menu to right
+  //
+  // Deprecated as of 3.1 in favor of `.dropdown-menu-[dir]`
   &.pull-right {
     right: 0;
     left: auto;
@@ -126,6 +128,25 @@
   }
 }
 
+// Menu positioning
+//
+// Add extra class to `.dropdown-menu` to flip the alignment of the dropdown
+// menu with the parent.
+.dropdown-menu-right {
+  left: auto; // Reset the default from `.dropdown-menu`
+  right: 0;
+}
+// With v3, we enabled auto-flipping if you have a dropdown within a right
+// aligned nav component. To enable the undoing of that, we provide an override
+// to restore the default dropdown menu alignment.
+//
+// This is only for left-aligning a dropdown menu within a `.navbar-right` or
+// `.pull-right` nav component.
+.dropdown-menu-left {
+  left: 0;
+  right: auto;
+}
+
 // Dropdown section headers
 .dropdown-header {
   display: block;
@@ -180,7 +201,12 @@
 @media (min-width: @grid-float-breakpoint) {
   .navbar-right {
     .dropdown-menu {
-      .pull-right > .dropdown-menu();
+      .dropdown-menu-right();
+    }
+    // Necessary for overrides of the default right aligned menu.
+    // Will remove come v4 in all likelihood.
+    .dropdown-menu-left {
+      .dropdown-menu-left();
     }
   }
 }

less/navbar.less

@@ -336,13 +336,6 @@
   .border-bottom-radius(0);
 }
 
-// Right aligned menus need alt position
-.navbar-nav.pull-right > li > .dropdown-menu,
-.navbar-nav > li > .dropdown-menu.pull-right {
-  left: auto;
-  right: 0;
-}
-
 
 // Buttons in navbars
 //