Bootstrap: posição do menu suspenso em relação ao item da barra de navegação

Eu tenho a seguinte lista suspensa

<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>

O canto superior esquerdo da lista suspensa está no canto esquerdo inferior do texto (Ação), mas espero que a posição do canto superior direito do menu suspenso esteja no lugar inferior direito do texto. Como eu posso fazer isso?

Este é o efeito que estamos tentando alcançar:

As classes que precisam ser aplicadas mudaram com o lançamento do Bootstrap 3.1.0 e novamente com o lançamento do Bootstrap 4. Se uma das soluções abaixo não parece estar funcionando, verifique o número da versão do Bootstrap que você está importando e tente um diferente.

Bootstrap 3

Antes da v3.1.0

Você pode usar a pull-rightclasse para alinhar o lado direito do menu com o cursor:

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

Fiddle: http://jsfiddle.net/joeczucha/ewzafdju/

Após a v3.1.0

A partir da v3.1.0, suspendemos o uso de .pull-right nos menus suspensos. Para alinhar um menu à direita, use .dropdown-menu-right. Os componentes de navegação alinhados à direita na barra de navegação usam uma versão mixin desta classe para alinhar automaticamente o menu. Para substituí-lo, use .dropdown-menu-left.

Você pode usar a dropdown-rightclasse para alinhar o lado direito do menu com o cursor:

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

Fiddle: http://jsfiddle.net/joeczucha/1nrLafxc/

Bootstrap 4

As classes do Bootstrap 4 são iguais às do Bootstrap> 3.1.0, mas observe que o restante da marcação ao redor mudou um pouco:

<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>

Fiddle: https://jsfiddle.net/joeczucha/f8h2tLoc/

Não tenho certeza sobre como outras pessoas resolvem esse problema ou se o Bootstrap tem alguma configuração para isso.

Encontrei este tópico que oferece uma solução:

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

Uma das postagens sugere o uso de

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

Eu testei e funciona.

Espero saber se o Bootstrap fornece configuração para fazer isso, não por meio do css acima.

Felicidades.

Com base no documento Bootstrap:

A partir da v3.1.0, .pull-right está obsoleto nos menus suspensos. use .dropdown-menu-right

por exemplo:

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

Se você quiser exibir o menu, basta adicionar a classe "dropup"
e remover a classe "dropdown" se existir no mesmo div.

<div class="btn-group dropup">

Mesmo que seja tarde, espero poder ajudar alguém. se o menu suspenso ou submenu estiver no lado direito da tela, ele será aberto no lado esquerdo; se o menu ou submenu estiver no lado esquerdo, ele será aberto no lado direito.

$(".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 a posição vertical, você também pode adicionar

$( 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 tem uma classe para isso chamada navbar-right. Portanto, seu código será o seguinte:

<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>

Se você deseja centralizar o menu suspenso, esta é a solução.

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