Bootstrap: Position des Dropdown-Menüs relativ zum Navigationsleistenelement

Ich habe die folgende Dropdown-Liste

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

Die obere linke Ecke des Dropdowns befindet sich in der unteren linken Ecke des Textes (Aktion), aber ich hoffe, dass sich die Position der oberen rechten Ecke des Dropdwons an der unteren rechten Stelle des Textes befindet. Wie kann ich das machen?

Dies ist der Effekt, den wir erreichen wollen:

Die Klassen, die angewendet werden müssen, wurden mit der Version von Bootstrap 3.1.0 und erneut mit der Version von Bootstrap 4 geändert. Wenn eine der folgenden Lösungen nicht funktioniert, überprüfen Sie die Versionsnummer von Bootstrap, die Sie importieren und versuchen Sie es mit einem anderen.

Bootstrap 3

Vor v3.1.0

Sie können die pull-rightKlasse verwenden, um die rechte Seite des Menüs mit dem Caret auszurichten:

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

Nach v3.1.0

Ab Version 3.1.0 ist .pull-right in Dropdown-Menüs veraltet. Um ein Menü nach rechts auszurichten, verwenden Sie .dropdown-menu-right. Rechts ausgerichtete Navigationskomponenten in der Navigationsleiste verwenden eine Mixin-Version dieser Klasse, um das Menü automatisch auszurichten. Verwenden Sie zum Überschreiben das .dropdown-Menü links.

Sie können die dropdown-rightKlasse verwenden, um die rechte Seite des Menüs mit dem Caret auszurichten:

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

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

Bootstrap 4

Die Klasse für Bootstrap 4 ist dieselbe wie für Bootstrap> 3.1.0. Achten Sie jedoch darauf, dass sich der Rest des umgebenden Markups ein wenig geändert hat:

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

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

Ich bin mir nicht sicher, wie andere Leute dieses Problem lösen oder ob Bootstrap eine Konfiguration dafür hat.

Ich habe diesen Thread gefunden, der eine Lösung bietet:

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

Einer der Beiträge schlägt die Verwendung von vor

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

Ich habe getestet und es funktioniert.

Ich hoffe zu wissen, ob Bootstrap die Konfiguration dafür bereitstellt, nicht über das obige CSS.

Prost.

Basierend auf dem Bootstrap-Dokument:

Ab Version 3.1.0 ist .pull-right in Dropdown-Menüs veraltet. benutze .dropdown-menu-right

z.B:

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

Wenn Sie das Menü anzeigen möchten, fügen Sie einfach die Klasse "Dropup" hinzu
und entfernen Sie die Klasse "Dropdown", falls vorhanden, aus demselben Div.

<div class="btn-group dropup">

Auch wenn es spät ist, hoffe ich, dass ich jemandem helfen kann. Wenn sich das Dropdown-Menü oder Untermenü auf der rechten Seite des Bildschirms befindet, ist es auf der linken Seite geöffnet. Wenn sich das Menü oder Untermenü auf der linken Seite befindet, ist es auf der rechten Seite geöffnet.

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

});

Um die vertikale Position zu erkennen, können Sie auch hinzufügen

$( 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 hat eine Klasse dafür navbar-right. Ihr Code sieht also wie folgt aus:

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

Wenn Sie das Dropdown zentrieren möchten, ist dies die Lösung.

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