Bootstrap: posizione del menu a discesa rispetto all'elemento della barra di navigazione

Ho il seguente menu a discesa

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

L'angolo in alto a sinistra del menu a discesa si trova nell'angolo in basso a sinistra del testo (Azione), ma spero che la posizione dell'angolo in alto a destra del menu a discesa sia nella posizione in basso a destra del testo. Come lo posso fare?

Questo è l'effetto che stiamo cercando di ottenere:

Le classi che devono essere applicate sono cambiate con il rilascio di Bootstrap 3.1.0 e di nuovo con il rilascio di Bootstrap 4. Se una delle soluzioni seguenti non sembra funzionare, ricontrolla il numero di versione di Bootstrap che stai importando e provane uno diverso.

Bootstrap 3

Prima della v3.1.0

Puoi usare la pull-rightclasse per allineare il lato destro del menu con il cursore:

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

Dopo la v3.1.0

A partire dalla v3.1.0, abbiamo deprecato .pull-right nei menu a discesa. Per allineare a destra un menu, usa .dropdown-menu-right. I componenti di navigazione allineati a destra nella barra di navigazione utilizzano una versione mista di questa classe per allineare automaticamente il menu. Per sovrascriverlo, usa .dropdown-menu-left.

Puoi usare la dropdown-rightclasse per allineare il lato destro del menu con il cursore:

<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

La classe per Bootstrap 4 è la stessa di Bootstrap> 3.1.0, fai attenzione perché il resto del markup circostante è leggermente cambiato:

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

Non sono sicuro di come altre persone risolvano questo problema o se Bootstrap abbia una configurazione per questo.

Ho trovato questo thread che fornisce una soluzione:

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

Uno dei post suggerisce l'uso di

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

Ho provato e funziona.

Spero di sapere se Bootstrap fornisce la configurazione per farlo, non tramite il css sopra.

Saluti.

Basato sul documento Bootstrap:

A partire dalla v3.1.0, .pull-right è deprecato nei menu a discesa. usa .drop-menu-right

per esempio:

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

Se vuoi visualizzare il menu in alto, aggiungi semplicemente
il "menu a discesa" della classe e rimuovi il "menu a discesa" della classe se esiste dallo stesso div.

<div class="btn-group dropup">

Anche se è tardi spero di poter aiutare qualcuno. se il menu a discesa o il sottomenu è sul lato destro dello schermo è aperto sul lato sinistro, se il menu o il sottomenu è sulla sinistra è aperto sul lato destro.

$(".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);
    }

});

Per rilevare la posizione verticale puoi anche aggiungere

$( 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 ha una classe per quella chiamata navbar-right. Quindi il tuo codice apparirà come segue:

<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 vuoi centrare il menu a discesa, questa è la soluzione.

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