Este é o efeito que estamos tentando alcançar:
As classes que precisam ser aplicadas mudaram com o lançamento do Bootstrap 3.1.0 e novamente com o lançamento do Bootstrap 4. Se uma das soluções abaixo não parece estar funcionando, verifique o número da versão do Bootstrap que você está importando e tente um diferente.
Bootstrap 3
Antes da v3.1.0
Você pode usar a pull-right
classe para alinhar o lado direito do menu com o cursor:
<li class="dropdown">
<a class="dropdown-toggle" href="#">Link</a>
<ul class="dropdown-menu pull-right">
<li>...</li>
</ul>
</li>
Fiddle: http://jsfiddle.net/joeczucha/ewzafdju/
Após a v3.1.0
A partir da v3.1.0, suspendemos o uso de .pull-right nos menus suspensos. Para alinhar um menu à direita, use .dropdown-menu-right. Os componentes de navegação alinhados à direita na barra de navegação usam uma versão mixin desta classe para alinhar automaticamente o menu. Para substituí-lo, use .dropdown-menu-left.
Você pode usar a dropdown-right
classe para alinhar o lado direito do menu com o cursor:
<li class="dropdown">
<a class="dropdown-toggle" href="#">Link</a>
<ul class="dropdown-menu dropdown-menu-right">
<li>...</li>
</ul>
</li>
Fiddle: http://jsfiddle.net/joeczucha/1nrLafxc/
Bootstrap 4
As classes do Bootstrap 4 são iguais às do Bootstrap> 3.1.0, mas observe que o restante da marcação ao redor mudou um pouco:
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#">
Link
</a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">...</a>
</div>
</li>
Fiddle: https://jsfiddle.net/joeczucha/f8h2tLoc/
class="dropdown"
foi a chave para mim a fim de obter um alinhamento adequadoNão tenho certeza sobre como outras pessoas resolvem esse problema ou se o Bootstrap tem alguma configuração para isso.
Encontrei este tópico que oferece uma solução:
https://github.com/twbs/bootstrap/issues/1411
Uma das postagens sugere o uso de
Eu testei e funciona.
Espero saber se o Bootstrap fornece configuração para fazer isso, não por meio do css acima.
Felicidades.
fonte
Com base no documento Bootstrap:
A partir da v3.1.0, .pull-right está obsoleto nos menus suspensos. use .dropdown-menu-right
por exemplo:
fonte
Se você quiser exibir o menu, basta adicionar a classe "dropup"
e remover a classe "dropdown" se existir no mesmo div.
fonte
Mesmo que seja tarde, espero poder ajudar alguém. se o menu suspenso ou submenu estiver no lado direito da tela, ele será aberto no lado esquerdo; se o menu ou submenu estiver no lado esquerdo, ele será aberto no lado direito.
Para detectar a posição vertical, você também pode adicionar
https://jsfiddle.net/jd1100/rf9zvdhg/28/
fonte
Boostrap tem uma classe para isso chamada
navbar-right
. Portanto, seu código será o seguinte:fonte
Se você deseja centralizar o menu suspenso, esta é a solução.
fonte