6 votes

Pourquoi le menu déroulant Bootstrap nav est-il aligné à droite ?

J'ai une liste déroulante bootstrap. Il fonctionne bien, mais lorsque je suis dans une page à laquelle on accède par le menu, cela devient bizarre :

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

Vous pouvez voir sur l'image que le menu est déplacé vers la droite.

Je colle le 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>

15voto

MarceloBarbosa Points 695

Juste pull-right dropdown-menu a fonctionné pour moi.

EDIT :

Déclassé .pull-right alignement

À partir de la version 3.1.0, nous avons supprimé l'option .pull-right dans les menus déroulants. Pour aligner un menu à droite, utilisez .dropdown-menu-right . Les composants nav alignés à droite dans la barre de navigation utilisent une version mixin de cette classe pour aligner automatiquement le menu. Pour la remplacer, utilisez .dropdown-menu-left .

5voto

burningpony Points 493

.pull-right est obsolète depuis Bootstrap 3.1.0

utiliser .dropdown-menu-right

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

5voto

Vince Points 769

Testé sur la version 3.3.2 de bootstrap, menu déroulant-droit ne fonctionne pas non plus pour moi. Voici ce que j'ai fait pour résoudre le problème dans mon cas.

Au lieu de :

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

J'ai utilisé :

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

Fonctionne parfaitement.

4voto

Essayez d'ajouter ceci à votre fichier css ou comme élément de style :

.dropdown-menu { left:auto; }

J'ai eu un problème similaire avec la liste déroulante déplacée et ceci a fonctionné pour moi.....

1voto

Leniel Macaferi Points 38324

Changement :

<ul class="nav pull-right">

à

<ul class="nav pull-left">

OU supprimez simplement la classe d'aide pull-right ne laissant que le nav classe :

<ul class="nav">

Voici une démonstration de JS Bin : http://jsbin.com/ezuray/1/

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X