Formulaire de recherche de pull-gauche/pull-droit sur la barre de navigation ne fonctionne pas droit dans google Chrome

Je suis de la migration de la Twitter Bootstrap version 2.3.2 de la dernière version 3 RC 1. Maintenant je rencontre un problème avec la recherche de boutons dans la barre de navigation supérieure. Code HTML ci-dessous:

<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <a class="navbar-brand" href="#">Brand</a>
            <div class="nav-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a href="#">Nav Item 1</a></li>
                    <li class="active"><a href="#">Nav Item 2</a></li>
                    <li><a href="#">Nav Item 3</a></li>
                    <li><a href="#">Nav Item 4</a></li>
                </ul>

                <form class="navbar-form pull-right">
                    <div class="input-group">
                        <input type="search" class="form-control" placeholder="Search"/>
                        <span class="input-group-btn">
                            <button type="submit" class="btn btn-default">Search</button>
                        </span> 
                    </div>
                </form>
            </div>
        </div>
    </div>
</body>

Le problème est, il fonctionne parfaitement sous Firefox, mais dans Chrome ou IE 9 il rend la zone de recherche super long et donc se déplace ce champ de recherche et un bouton en dessous de la barre de navigation.

J'ai essayé de dépannage et de trouver si j'ai enlevé le "pull-right" de la forme, la zone de recherche et le bouton sera déplacé au-dessus de en ligne avec les éléments de navigation, mais la perte de l'effet que pull-droit de recours - il occuperait toute la ligne de l'espace sur la droite.

En outre que le débogage si j'ai remplacé le formulaire de recherche avec 

            <form class="navbar-form pull-right">
                <div class="input-group">
                    <input type="text" placeholder="Search">
                    <button type="submit" class="btn btn-default">Search</button>
                </div>
            </form>

Alors il sera tout simplement fonctionnent bien; mais ce n'est pas mon but non plus.

Un problème avec mon code? Ou est-ce un problème avec la version 3 RC 1? De toute façon pour le résoudre?

Au lieu de tirer à droite vous devriez être en utilisant la barre de navigation à droite, comme pour les docs.

OriginalL'auteur Bryant Zheng | 2013-08-05

  1. 7

    Vous pouvez ajouter la col-sm-4 classe à votre <form> élément.

    Cela devrait garder la largeur correcte en fonction de la largeur de l'écran.

    Jouer avec la colonne de dimensionnement (col-sm-**) jusqu'à ce que vous obtenez la façon dont vous le souhaitez.

    Voir ce jsFiddle démo

    Merci @Schmalzy. Cela a résolu mon problème. J'ai pensé que j'ai aussi essayé le col-*** les choses mais j'ai été incorrect quelque part...

    OriginalL'auteur Schmalzy