O menu suspenso de inicialização do Twitter sai da tela

151

Eu quero implementar o menu suspenso de inicialização do twitter, aqui está o meu código:

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

O menu suspenso funciona bem, meu menu suspenso é colocado próximo à borda direita da tela e, quando clico na minha lista suspensa, a lista sai da tela. Parece na tela:

insira a descrição da imagem aqui

Como posso corrigir isso?

html css twitter-bootstrap pawel
fonte
A resposta correta (para inicialização> = v 3.2.0) para esta pergunta é resolvida aqui: stackoverflow.com/questions/23654962/… por @cvrebert.
Michael Trouw
Eu acredito que o código está faltando uma tag span final: </ span>
stealthysnacks

Respostas:

263

adicionando .pull-righta ul.dropdown-menudeve fazê-lo

Aviso de descontinuação: No Bootstrap v3.1.0, os .pull-rightmenus suspensos estão descontinuados . Para alinhar à direita um menu, use .dropdown-menu-right.

Ross
fonte
29
Essa é uma questão completamente separada
Dewayne
14
Essa resposta realmente não resolve o problema se o usuário estiver usando algum dispositivo de tela menor - ele sai do lado esquerdo em vez do direito (na verdade, você apenas altera o botão esquerdo para o botão direito).
Anónimo
5
Veja krzychu resposta como Bootstrap.pull-direita é obsoleta
Jeroen
1
@HristoEnev me também. Suas listas suspensas saíram do botão?
Choylton B. Higginbottom
116

Desde que o Bootstrap v3.1.0, a adição .pull-rightfoi descontinuada nos menus suspensos. A .dropdown-menu-rightdeve ser adicionado ao ul.dropdown-menuinvés. Documentos

krzychu
fonte
10
Mesmo com o último bootstrap, o .pull-right funciona para mim e o .dropdown-menu-right não faz nada.
Shane Grant
Isso faz de fato trabalho em Bootstrap 4, exceto que você adicionar a classe .dropdown menu-direito de div.dropdown-menu (não ul)
Timothy Kanski
<ul class="dropdown-menu dropdown-menu-right">trabalhou para mim em 4.1.1
dw1 12/07/1918
22

Para o Bootstrap 4, adicionar dropdown-menu-rightobras. Aqui está um exemplo de trabalho ..

http://codeply.com/go/w2MJngNkDQ

praj
fonte
Tentei todas as outras respostas - e essa foi a única que funcionou para mim também. Estou usando o Bootstrap v. 4.1.0.
Zeth
14

uma solução que não precisa modificar o HTML, apenas o CSS é

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

É particularmente útil para menus gerados dinamicamente, onde nem sempre é possível adicionar a classe recomendada dropdown-menu-rightao último elemento

GiorgosK
fonte
1
esta é a única solução que funciona para o bootstrap 4.0.0
charsi
10

Você pode usar a classe .dropdown-pull-rightcom os seguintes 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>
Expandir snippet

Mohan Dere
fonte
2

no Bootstrap 4 você pode usar .dropleft

basta mudar para:

<span class="dropleft">

ou

adicione .dropdown-menu- {lg, med, sm, xs} -direito ao seu menu suspenso 

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

float-*-right para Bootstrap 4

* = xs, sm, md, lg

Jeremy Lynch
fonte
0

Não posso deixar um comentário porque meu nível de SO está muito baixo, mas apenas certifiquei-me de que o contêiner pai esteja definido como "estouro: oculto" assim (verifique também se a posição está definida).

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