Das Twitter-Bootstrap-Dropdown wird außerhalb des Bildschirms angezeigt

Lesezeit: 4 Minuten

Benutzer-Avatar
Pawel

Ich möchte das Twitter-Bootstrap-Dropdown-Menü implementieren, hier ist mein Code:

<span class="dropdown"> 
<a href="#menu1" class="dropdown-toggle" data-toggle="dropdown" ><img class="left" src="/static/img/topmenu_preferences.png" /><b class="caret"></b></a>
<ul class="dropdown-menu">
  <li><a href="#">a</a></li>
  <li><a href="#">b</a></li>
  <li><a href="#">c</a></li>
  <li class="divider"></li>
  <li><a href="#">d</a></li>
</ul>

Dropdown funktioniert gut, mein Dropdown wird neben dem rechten Rand des Bildschirms platziert und wenn ich auf meinen Dropdown-Schalter klicke, geht die Liste aus dem Bildschirm. Auf dem Bildschirm sieht es so aus:

Geben Sie hier die Bildbeschreibung ein

Wie kann ich es reparieren?

  • Die richtige Antwort (für Bootstrap >= v 3.2.0) auf diese Frage wird hier gelöst: stackoverflow.com/questions/23654962/… von @cvrebert.

    – Michael Trouv

    13. Juni 2016 um 15:36 Uhr

  • Ich glaube, Ihrem Code fehlt ein End-Span-Tag:

    – heimliche Snacks

    7. Juli 2016 um 18:30 Uhr

Benutzer-Avatar
Roß

Hinzufügen .pull-right zu ul.dropdown-menu Sollte es tun

Abwertungshinweis: Ab Bootstrap v3.1.0, .pull-right auf Dropdown-Menüs ist veraltet. Um ein Menü rechtsbündig auszurichten, verwenden Sie .dropdown-menu-right.

Abwertungshinweis 2: Ab Bootstrap v5, .dropdown-menu-right ist veraltet. Verwenden Sie für Bootstrap v5 .dropdown-menu-end.

  • Das ist eine ganz andere Frage

    – Dewayne

    26. April 2013 um 11:31 Uhr

  • Diese Antwort behebt das Problem nicht wirklich, wenn der Benutzer ein kleineres Bildschirmgerät verwendet – es geht von der linken Seite statt von der rechten Seite aus (tatsächlich ändern Sie nur das Ziehen nach links in das Ziehen nach rechts).

    – Anonym

    9. November 2013 um 10:09 Uhr

  • Siehe Antwort von krzychu, da Bootstrap.pull-right veraltet ist

    – Jeroen

    11. Juli 2014 um 10:10 Uhr

  • @HristoEnev ich auch nicht. Sind Ihre Dropdowns weit von der Schaltfläche entfernt?

    – Choylton B. Higginbottom

    15. Dezember 2015 um 21:45 Uhr


  • Bei Boostrap v5.0 ist es .dropdown-menu-end statt .dropdown-menu-right getbootstrap.com/docs/5.0/components/dropdowns/…

    – Dinaraj

    18. Februar 2021 um 9:07 Uhr


Benutzer-Avatar
krzychu

Seit Bootstrap v3.1.0 hinzugefügt .pull-right ist in Dropdown-Menüs veraltet. EIN .dropdown-menu-right ergänzt werden soll ul.dropdown-menu stattdessen. Dokumente

  • Selbst mit dem neuesten Bootstrap funktioniert .pull-right für mich und .dropdown-menu-right tut nichts.

    – Shane Grant

    30. Januar 2015 um 5:20 Uhr

  • Dies funktioniert tatsächlich in Bootstrap 4, außer Sie fügen die Klasse .dropdown-menu-right zu div.dropdown-menu (nicht ul) hinzu.

    – Timothy Kanski

    2. April 2018 um 16:47 Uhr

  • <ul class="dropdown-menu dropdown-menu-right"> hat bei mir am 4.1.1 funktioniert

    – dw1

    12. Juli 2018 um 16:33 Uhr


Für Bootstrap 4, Hinzufügen dropdown-menu-right funktioniert. Hier ist ein funktionierendes Beispiel..

http://codeply.com/go/w2MJngNkDQ

  • Ich habe alle anderen Antworten ausprobiert – und diese war die einzige, die auch für mich funktioniert hat. Ich verwende Bootstrap v. 4.1.0.

    – Zet

    14. Juli 2018 um 11:52 Uhr

eine Lösung, die keine Änderung des HTML-Codes erfordert, sondern nur des CSS

li.dropdown:last-child .dropdown-menu {
  right: 0;
  left: auto;
}

Es ist besonders nützlich für dynamisch generierte Menüs, bei denen es nicht immer möglich ist, die empfohlene Klasse hinzuzufügen dropdown-menu-right bis zum letzten Element

Benutzer-Avatar
Mohan Dere

Sie können Klasse verwenden .dropdown-pull-right mit folgendem CSS:

.dropdown-pull-right {
  float: right !important;
  right: 0;
  left: auto;
}

.dropdown-pull-right>.dropdown-menu {
  right: 0;
  left: auto;
}
<link href="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>


<div class="dropdown dropdown-pull-right btn-group">
  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
  Open Dropdown
  <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>

In Bootstrap 4 können Sie .dropleft verwenden

einfach umstellen auf:

<span class="dropleft">

oder

füge .dropdown-menu-{lg,med,sm,xs}-rechts zu deinem Dropdown-Menü hinzu

<div class="dropdown-menu dropdown-menu-sm-right" aria-labelledby="dropdown03">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
</div>

Benutzer-Avatar
Jeremy Lynch

float-*-right für Bootstrap4

* = xs, sm, md, lg

1333610cookie-checkDas Twitter-Bootstrap-Dropdown wird außerhalb des Bildschirms angezeigt

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy