bolha suspensa bootstrap alinhada à direita (não empurrada para a direita)


89

Tenho o carrinho no menu superior, usando push-righte meu problema é que a bolha suspensa sai da página. Estou tentando alinhar a bolha à direita, para que fique alinhada à direita com 'clique'

como isso

insira a descrição da imagem aqui

HTML:

<div class="cart pull-right">
  <ul class="nav">
    <li class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">CLICK</a>
       <div class="dropdown-menu">
       STUFF
       </div>
    </li>
  </ul>
</div>

2
É melhor colocar em jsfiddle.net para mostrar aos outros o que você tem.
JofryHS

você já experimentou right:0;no dropdown?
Rahul

Respostas:


189

Bootstrap 3.1+

Adicionando a classe .dropdown-menu-right ao mesmo div que contém o menu suspenso da classe:

<div class="dropdown-menu dropdown-menu-right">
    STUFF
</div>

http://getbootstrap.com/components/#dropdowns-alignment

Bootstrap 2.3 e 3.0

Adicione a classe .pull-right ao mesmo div que contém o menu suspenso da classe

<div class="dropdown-menu pull-right">
    STUFF
</div>

Isso parece funcionar para mim usando o bootstrap 3.0


20
Desde a v3.1.0 você pode usar o menu suspenso à direita . Consulte github.com/twbs/bootstrap/blob/v3.1.0/less/dropdowns.less#L135
Laurent Dezitter

19

Isso pode ser resolvido com a classe de bootstrap dropdown-menu-right com dropdown-menuque é especificamente para este problema que usa as propriedades CSS right: 0;e left: auto;para alinhar o botão direito.

Esta solução está funcionando para mim.

Fonte - http://getbootstrap.com/components/#btn-dropdowns-dropup (vá para ferramentas de desenvolvedor para isso)


1
Sim, esta é a solução correta (Bootstrap 3.3.7). Apenas certifique-se de adicionar a classe dropdown-menu-rightao ulque contém as opções do menu (não ao botão)
Miguel

6
<div class="dropdown-menu dropdown-menu-right">

Isso ainda está funcionando no boostrap 4.2.1 :)



2

OK, entendi!

position:relative;left:0 em <ul class="dropdown-menu">

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.