Bootstrap: posición del menú desplegable en relación con el elemento de la barra de navegación

Tengo el siguiente menú desplegable

<label class="dropdown-toggle" role="button" data-toggle="dropdown" data-target="#">
    Action <b class="caret"></b></label>
<ul class="dropdown-menu" role="menu" aria-labelledby="lang-selector" id="lang-selector">
    dropdown content goes here
</ul>

La esquina superior izquierda del menú desplegable está en la esquina inferior izquierda del texto (Acción), pero espero que la posición de la esquina superior derecha del menú desplegable esté en la parte inferior derecha del texto. ¿Cómo puedo hacer eso?

Este es el efecto que estamos tratando de lograr:

Las clases que deben aplicarse cambiaron con el lanzamiento de Bootstrap 3.1.0 y nuevamente con el lanzamiento de Bootstrap 4. Si una de las siguientes soluciones no parece estar funcionando, verifique el número de versión de Bootstrap que está importando. y prueba uno diferente.

Bootstrap 3

Antes de v3.1.0

Puede usar la pull-rightclase para alinear el lado derecho del menú con el símbolo de intercalación:

<li class="dropdown">
  <a class="dropdown-toggle" href="#">Link</a>
  <ul class="dropdown-menu pull-right">
     <li>...</li>
  </ul>
</li>

Violín: http://jsfiddle.net/joeczucha/ewzafdju/

Después de v3.1.0

A partir de la v3.1.0, hemos desaprobado la extensión .pull-right en menús desplegables. Para alinear un menú a la derecha, use .dropdown-menu-right. Los componentes de navegación alineados a la derecha en la barra de navegación utilizan una versión mixta de esta clase para alinear automáticamente el menú. Para anularlo, use .dropdown-menu-left.

Puede usar la dropdown-rightclase para alinear el lado derecho del menú con el símbolo de intercalación:

<li class="dropdown">
  <a class="dropdown-toggle" href="#">Link</a>
  <ul class="dropdown-menu dropdown-menu-right">
     <li>...</li>
  </ul>
</li>

Violín: http://jsfiddle.net/joeczucha/1nrLafxc/

Bootstrap 4

La clase para Bootstrap 4 es la misma que Bootstrap> 3.1.0, solo tenga cuidado porque el resto del marcado circundante ha cambiado un poco:

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#">
    Link
  </a>
  <div class="dropdown-menu dropdown-menu-right">
    <a class="dropdown-item" href="#">...</a>
  </div>
</li>

Violín: https://jsfiddle.net/joeczucha/f8h2tLoc/

No estoy seguro de cómo otras personas resuelven este problema o si Bootstrap tiene alguna configuración para esto.

Encontré este hilo que proporciona una solución:

https://github.com/twbs/bootstrap/issues/1411

Una de las publicaciones sugiere el uso de

<ul class="dropdown-menu" style="right: 0; left: auto;">

Probé y funciona.

Espero saber si Bootstrap proporciona una configuración para hacer esto, no a través del css anterior.

Salud.

Basado en Bootstrap doc:

A partir de la v3.1.0, .pull-right está obsoleto en los menús desplegables. usar .dropdown-menu-right

p.ej:

<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dLabel">

Si desea mostrar el menú hacia arriba, simplemente agregue la clase "desplegable"
y elimine la clase "desplegable" si existe en el mismo div.

<div class="btn-group dropup">

Incluso si es tarde, espero poder ayudar a alguien. si el menú desplegable o submenú está en el lado derecho de la pantalla, está abierto en el lado izquierdo, si el menú o submenú está en el lado izquierdo, está abierto en el lado derecho.

$(".dropdown-toggle").on("click", function(event){//"show.bs.dropdown"
    var liparent=$(this.parentElement);
    var ulChild=liparent.find('ul');
    var xOffset=liparent.offset().left;
    var alignRight=($(document).width()-xOffset)<xOffset;


    if (liparent.hasClass("dropdown-submenu"))
    {
        ulChild.css("left",alignRight?"-101%":"");
    }
    else
    {                
        ulChild.toggleClass("dropdown-menu-right",alignRight);
    }

});

Para detectar la posición vertical también puede agregar

$( document ).ready(function() {
        var liparent=$(".dropdown");
    var yOffset=liparent.offset().top;
        var toTop=($(document).height()-yOffset)<yOffset;
    liparent.toggleClass("dropup",toTop);
});

https://jsfiddle.net/jd1100/rf9zvdhg/28/

Boostrap tiene una clase para eso llamada navbar-right. Entonces su código se verá de la siguiente manera:

<ul class="nav navbar-right">
    <li class="dropdown">
      <a class="dropdown-toggle" href="#" data-toggle="dropdown">Link</a>
      <ul class="dropdown-menu">
         <li>...</li>
      </ul>
    </li>
</ul>

Si desea centrar el menú desplegable, esta es la solución.

<ul class="dropdown-menu" style="right:auto; left: auto;">