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

107

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?

neugierig1
quelle

Antworten:

227

Dies ist der Effekt, den wir erreichen wollen:

Ein rechtsbündiges Menü

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/

Joe Czucha
quelle
1
Ich habe Pull-Right und Pull-Left auf der RTL-Website getestet. Sie funktionieren perfekt, aber Dropdown-Menü rechts und Dropdown-Menü links nicht.
neugierig1
Der Container (.dropdown) muss die Anzeige "Inline-Bock" haben. In diesem Beispiel ist der LI in Ordnung, aber wenn es sich um einen DIV handelt, wird die Ausrichtung am Ende des Blockelements platziert, das von der Breite des Untermenüs beeinflusst wird.
Nicholas
Die Klasse "Dropdown-Menü-rechts" hat den Trick auch mit Bootstrap 4 (Beta) gemacht. Vielen Dank! "rechts ziehen" hat nicht funktioniert.
Andreas Vogl
Verwenden class="dropdown"war der Schlüssel für mich, um eine korrekte Ausrichtung zu erhalten
Louis
50

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.

neugierig1
quelle
1
Vielen Dank, dieser arbeitete für Bootstrap 4 Dropdown in einer Navbar
Petru Lebada
20

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">
Neuniger
quelle
1
Ich habe Pull-Right und Pull-Left auf der RTL-Website getestet. Sie funktionieren perfekt, aber Dropdown-Menü rechts und Dropdown-Menü links nicht.
neugierig1
10

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

Geben Sie hier die Bildbeschreibung ein

Philip Enc
quelle
1
"Ich hoffe, dass die Position der oberen rechten Ecke des Dropdwon an der unteren rechten Stelle des Textes ist" - OP
Joe Czucha
Ich kann deinen Kommentar nicht verstehen, sorry !!
Philip Enc
Es sieht gut aus, aber wie können wir es automatisch machen? Als hätte ich eine Liste von Daten und der untere Teil ist nicht sicher.
Santosh
2

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/

JD11
quelle
Kann es auch wie oben und unten eingestellt werden? Wenn sich der Dropdown-Link unten befindet, möchte ich ihn nach oben öffnen. Können wir das erreichen?
Santosh
1
Ich habe meine Antwort aktualisiert, um die vertikale Position zu erkennen.
JD11
1

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>
Andrei Stalbe
quelle
0

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

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