Why is the Bootstrap nav dropdown menu aligned to the right?

Question

I have a dropdown list of bootstraps. It works fine, but when I am inside the menu accessed page, it gets weird:

http://2.bp.blogspot.com/-vw49cpP7weo/UZw0Jh_zmhI/AAAAAAAACJc/oadR5CTIus0/s640/dropdown.png

You can see in the picture, the menu is shifted to the right.

I am inserting the code:

<div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <a class="brand" href="index.html"><i class="icon-chevron-right"></i> Zimil Ltda</a> <div class="nav-collapse collapse"> <ul class="nav pull-right"> <li><a href="index.html">Inicio</a></li> <li><a href="acerca.html">Quienes somos</a></li> <li class="active" class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle" href="jubilados.html"> Productos <i class="icon-caret-down"></i></a> <ul class="dropdown-menu"> <li><a href="jubilados.html">Préstamos a jubilados</a></li> <li><a href="cbu.html">Préstamos CBU</a></li> <li><a href="otros.html">Otros créditos</a></li> </ul> </li> <li><a href="trabajar.php">Trabajá con nosotros</a></li> </ul> </div> </div> </div> 

Answer 1

Just pull-right dropdown-menu worked for me.

EDIT:

Deprecated .pull-right alignment

Starting with version 3.1, we have deprecated .pull-right in the drop-down menus. To align the menu to the right, use .dropdown-menu-right . Alignment navigation components in the navigation bar use the mixin version of this class to automatically align menus. To undo it, use .dropdown-menu-left .

Answer 2

Try adding this to your css file or as a style element:

 .dropdown-menu { left:auto; } 

I had a similar problem with a biased dropdown and it worked for me .....

Answer 3

.pull-right deprecated by Bootstrap 3.1.0

using .dropdown-menu-right

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

Answer 4

As tested in bootstrap version 3.3.2, dropdown-menu-right doesn't work for me either. Here is what I did to fix this in my case.

Instead:

 <ul class="dropdown-menu dropdown-menu-right"> 

I used:

 <ul class="dropdown-menu" style="right: 0; left: auto;"> 

Works great.

Answer 5

Edit:

 <ul class="nav pull-right"> 

to

 <ul class="nav pull-left"> 

OR just remove the pull-right helper class, leaving only the nav class:

 <ul class="nav"> 

Here's JS Bin demo: http://jsbin.com/ezuray/1/