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-right
Klasse 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-right
Klasse 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/
class="dropdown"
war der Schlüssel für mich, um eine korrekte Ausrichtung zu erhaltenIch 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
Ich habe getestet und es funktioniert.
Ich hoffe zu wissen, ob Bootstrap die Konfiguration dafür bereitstellt, nicht über das obige CSS.
Prost.
quelle
Basierend auf dem Bootstrap-Dokument:
Ab Version 3.1.0 ist .pull-right in Dropdown-Menüs veraltet. benutze .dropdown-menu-right
z.B:
quelle
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.
quelle
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.
Um die vertikale Position zu erkennen, können Sie auch hinzufügen
https://jsfiddle.net/jd1100/rf9zvdhg/28/
quelle
Boostrap hat eine Klasse dafür
navbar-right
. Ihr Code sieht also wie folgt aus:quelle
Wenn Sie das Dropdown zentrieren möchten, ist dies die Lösung.
quelle