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

151

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 befindet sich neben dem rechten Bildschirmrand und wenn ich auf meinen Dropdown-Schalter klicke, wird die Liste außerhalb des Bildschirms angezeigt. Es sieht aus wie auf dem Bildschirm:

Geben Sie hier die Bildbeschreibung ein

Wie kann ich es reparieren?

html css twitter-bootstrap pawel
quelle
Die richtige Antwort (für Bootstrap> = v 3.2.0) auf diese Frage wird hier gelöst: stackoverflow.com/questions/23654962/… von @cvrebert.
Michael Trouw
Ich glaube, Ihrem Code fehlt ein End-Span-Tag: </ span>
Stealthysnacks

Antworten:

261

Hinzufügen .pull-rightzu ul.dropdown-menusollte es tun

Verfallshinweis : Ab Bootstrap v3.1.0 sind .pull-rightDropdown-Menüs veraltet . Verwenden Sie zum Ausrichten eines Menüs nach rechts .dropdown-menu-right.

Ross
quelle
29
Das ist eine völlig andere Frage
Dewayne
14
Diese Antwort behebt das Problem nicht, wenn der Benutzer ein Gerät mit kleinerem Bildschirm verwendet - es geht von der linken Seite anstelle der rechten Seite aus (tatsächlich ändern Sie einfach das Ziehen von links nach rechts).
Anonym
5
Siehe krzychu Antwort als Bootstrap.pull-rechts ist veraltet
Jeroen
1
@HristoEnev mich auch. Sind Ihre Dropdowns weit vom Button entfernt?
Choylton B. Higginbottom
116

Seit Bootstrap v3.1.0 ist das Hinzufügen .pull-rightin Dropdown-Menüs veraltet. Stattdessen .dropdown-menu-rightsollte A hinzugefügt ul.dropdown-menuwerden. Docs

krzychu
quelle
10
Selbst mit dem neuesten Bootstrap funktioniert .pull-right für mich und .dropdown-menu-right macht nichts.
Shane Grant
Dies funktioniert in der Tat in Bootstrap 4, außer dass Sie die Klasse .dropdown-menu-right zu div.dropdown-menu (nicht ul)
hinzufügen
<ul class="dropdown-menu dropdown-menu-right">arbeitete für mich am 4.1.1
dw1
22

Für Bootstrap 4 dropdown-menu-rightfunktioniert das Hinzufügen . Hier ist ein Arbeitsbeispiel.

http://codeply.com/go/w2MJngNkDQ

praj
quelle
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.
Zeth
14

Eine Lösung, bei der nicht nur das CSS geändert werden muss

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 dropdown-menu-rightzum letzten Element hinzuzufügen

GiorgosK
quelle
1
Dies ist die einzige Lösung, die für Bootstrap 4.0.0
funktioniert
10

Sie können class .dropdown-pull-rightmit folgendem CSS verwenden:

.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>
Erweitern Sie das Snippet

Mohan Dere
quelle
2

In Bootstrap 4 können Sie .dropleft verwenden

Wechseln Sie einfach zu:

<span class="dropleft">

oder

füge .dropdown-menu- {lg, med, sm, xs} -right 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>
Dedy Setiawan
quelle
1

float-*-right für Bootstrap 4

* = xs, sm, md, lg

Jeremy Lynch
quelle
0

Ich kann keinen Kommentar hinterlassen, da mein SO-Level zu niedrig ist, aber ich habe nur sichergestellt, dass der übergeordnete Container wie folgt auf "Überlauf: versteckt" eingestellt ist (stellen Sie auch sicher, dass die Position festgelegt ist).

<div style="overflow:hidden;position:relative">
    <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>
</div>
hackdotslashdotkill
quelle