Bootstrap: Pozycja menu rozwijanego względem elementu paska nawigacyjnego

Mam następujące menu

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

Lewy górny róg listy rozwijanej znajduje się w lewym dolnym rogu tekstu (Akcja), ale mam nadzieję, że pozycja prawego górnego rogu listy rozwijanej znajduje się w prawym dolnym miejscu tekstu. Jak mogę to zrobić?

Oto efekt, który staramy się osiągnąć:

Klasy, które należy zastosować, zmieniły się wraz z wydaniem Bootstrap 3.1.0 i ponownie wraz z wydaniem Bootstrap 4. Jeśli jedno z poniższych rozwiązań nie działa, sprawdź dwukrotnie numer wersji programu Bootstrap, który importujesz i spróbuj innego.

Bootstrap 3

Przed wersją 3.1.0

Możesz użyć pull-rightklasy, aby wyrównać prawą stronę menu z daszkiem:

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

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

Po wersji 3.1.0

Od wersji 3.1.0 wycofaliśmy .pull-right w menu rozwijanych. Aby wyrównać menu do prawej, użyj .dropdown-menu-right. Komponenty nawigacyjne wyrównane do prawej na pasku nawigacyjnym używają mieszanej wersji tej klasy, aby automatycznie wyrównać menu. Aby to zmienić, użyj .dropdown-menu-left.

Możesz użyć dropdown-rightklasy, aby wyrównać prawą stronę menu z daszkiem:

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

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

Bootstrap 4

Klasa dla Bootstrap 4 jest taka sama jak Bootstrap> 3.1.0, po prostu uważaj, ponieważ reszta otaczających znaczników nieco się zmieniła:

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

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

Nie jestem pewien, jak inni ludzie rozwiązują ten problem lub czy Bootstrap ma do tego konfigurację.

Znalazłem ten wątek, który zapewnia rozwiązanie:

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

Jeden z postów sugeruje użycie

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

Testowałem i działa.

Mam nadzieję, że dowiemy się, czy Bootstrap zapewnia konfigurację do tego, a nie przez powyższy css.

Twoje zdrowie.

Na podstawie dokumentacji Bootstrap:

Od wersji 3.1.0 .pull-right jest przestarzałe w menu rozwijanych. użyj .dropdown-menu-right

na przykład:

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

Jeśli chcesz wyświetlić menu w górę, po prostu dodaj klasę „dropup”
i usuń klasę „dropdown”, jeśli istnieje z tego samego div.

<div class="btn-group dropup">

Nawet jeśli jest późno, mam nadzieję, że mogę komuś pomóc. jeśli menu rozwijane lub podmenu znajduje się po prawej stronie ekranu, jest otwarte po lewej stronie, jeśli menu lub podmenu jest po lewej stronie, jest otwarte po prawej stronie.

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

});

Aby wykryć pozycję w pionie, możesz również dodać

$( 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 ma klasę o nazwie navbar-right. Twój kod będzie więc wyglądał następująco:

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

Jeśli chcesz wyśrodkować menu, to jest rozwiązanie.

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