Menu rozwijane Twittera bootstrap wychodzi poza ekran

151

Chcę zaimplementować menu rozwijane bootstrap na Twitterze, oto mój kod:

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

Rozwijane menu działa dobrze, moje menu jest umieszczone obok prawej krawędzi ekranu, a kiedy klikam przełącznik rozwijania, lista wychodzi poza ekran. Wygląda jak na ekranie:

wprowadź opis obrazu tutaj

Jak mogę to naprawić?

html css twitter-bootstrap Paweł
źródło
Prawidłowa odpowiedź (dla bootstrap> = v 3.2.0) na to pytanie znajduje się tutaj: stackoverflow.com/questions/23654962/ ... autor: @cvrebert.
Michael Trouw
Wydaje mi się, że w Twoim kodzie brakuje tagu końca rozpiętości: </span>
stealthysnacks,

Odpowiedzi:

263

dodanie .pull-rightdo ul.dropdown-menupowinno to zrobić

Uwaga o wycofaniu : od wersji Bootstrap 3.1.0 .pull-rightmenu rozwijane są nieaktualne . Aby wyrównać menu do prawej, użyj .dropdown-menu-right.

Ross
źródło
29
To zupełnie odrębne pytanie
Dewayne
14
Ta odpowiedź w rzeczywistości nie rozwiązuje problemu, jeśli użytkownik korzysta z jakiegoś mniejszego urządzenia z ekranem - wychodzi z lewej strony zamiast z prawej strony (w rzeczywistości wystarczy zmienić pociągnięcie w lewo na pociągnięcie w prawo).
Anonimowy
5
Zobacz Krzychu odpowiedź jako Bootstrap.pull-prawo jest przestarzałe
Jeroen
1
@HristoEnev mnie też. Czy Twoje listy rozwijane zniknęły z przycisku?
Choylton B. Higginbottom
116

Ponieważ dodawanie Bootstrap w wersji 3.1.0 .pull-rightjest przestarzałe w menu rozwijanych. .dropdown-menu-rightNależy dodać ul.dropdown-menuzamiast. Dokumenty

krzychu
źródło
10
Nawet z najnowszym bootstrapem .pull-right działa dla mnie, a .dropdown-menu-right nic nie robi.
Shane Grant
To rzeczywiście działa w Bootstrap 4, z wyjątkiem dodania klasy .dropdown-menu-right do div.dropdown-menu (nie ul)
Timothy Kanski
<ul class="dropdown-menu dropdown-menu-right">pracował dla mnie w dniu 4.1.1
dw1
22

W przypadku Bootstrap 4 dodawanie dropdown-menu-rightdziała. Oto działający przykład.

http://codeply.com/go/w2MJngNkDQ

praj
źródło
Wypróbowałem wszystkie inne odpowiedzi - i ta była jedyną, która również mi pasowała. Używam Bootstrap v. 4.1.0.
Zeth,
14

rozwiązanie, które nie wymaga modyfikowania HTML-a tylko CSS

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

Jest to szczególnie przydatne w przypadku dynamicznie generowanych menu, w których nie zawsze jest możliwe dodanie zalecanej klasy dropdown-menu-rightdo ostatniego elementu

GiorgosK
źródło
1
jest to jedyne rozwiązanie, które działa na bootstrap 4.0.0
charsi
10

Możesz użyć klasy .dropdown-pull-rightz następującym 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>
Rozwiń fragment

Mohan Dere
źródło
2

w Bootstrap 4 możesz użyć .dropleft

po prostu zmień na:

<span class="dropleft">

lub

dodaj .dropdown-menu- {lg, med, sm, xs} -right do twojego rozwijanego-menu 

<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
źródło
1

float-*-right dla Bootstrap 4

* = xs, sm, md, lg

Jeremy Lynch
źródło
0

Nie mogę zostawić komentarza, ponieważ mój poziom SO jest zbyt niski, ale właśnie upewniłem się, że kontener nadrzędny jest ustawiony na „przepełnienie: ukryty”, tak jak to jest (upewnij się również, że pozycja jest ustawiona).

<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
źródło