Why is Bootstrap nav dropdown menu aligned to the right?

Question

I am having a bootstrap dropdown. It works fine, but when I am inside a page accessed through the menu, then 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 displaced to the right.

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

Solution 1

Just pull-right dropdown-menu worked for me.

EDIT:

Deprecated .pull-right alignment

As of v3.1.0, we've deprecated .pull-right on dropdown menus. To right-align a menu, use .dropdown-menu-right. Right-aligned nav components in the navbar use a mixin version of this class to automatically align the menu. To override it, use .dropdown-menu-left.

Solution 2

As tested on version 3.3.2 of bootstrap, dropdown-menu-right does not work for me either. Here's what I did to fix it in my case.

Instead of:

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

I used:

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

Works perfectly.

Solution 3

.pull-right has been deprecated as of Bootstrap 3.1.0

use .dropdown-menu-right

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

Solution 4

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

.dropdown-menu { left:auto; }

I had a similar problem with displaced drop-down and this worked for me.....

Solution 5

Change:

<ul class="nav pull-right">

to

<ul class="nav pull-left">

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

<ul class="nav">

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

View more solutions