Plusieurs Effondrement des boutons dans la barre de navigation avec Bootstrap 3.0

Je suis en utilisant Bootstrap 3.0 pour afficher une barre de navigation avec des liens et un champ de recherche.
Quand je vais à la "version mobile" j'ai un bouton qui s'effondre la barre de navigation et afficher tout le contenu: les liens, et le champ de recherche. Maintenant j'ai besoin de deux boutons, l'un pour l'effondrement seulement les liens de la barre de navigation et le bouton de l'effondrement que le champ de recherche. Comment puis-je faire cela?

OriginalL'auteur Martín | 2013-09-16

  1. 20

    Séparer les liens et le formulaire de recherche en deux navbar-collapse éléments et demandez à chaque bouton de la cible correspondante:

    Exemple de balisage:

    <nav class="navbar navbar-default" role="navigation">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#search">Toggle search</button>
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#links">Toggle links</button> 
        <a class="navbar-brand" href="#">Brand</a>
    </div>
    <ul class="collapse navbar-collapse nav navbar-nav" id="links">
        <!--Links go here-->
    </ul>
    <div class="collapse navbar-collapse" id="search">
        <form class="navbar-form navbar-left" role="search">
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Search">
            </div>
            <button type="submit" class="btn btn-default">Submit</button>
        </form>
    </div>
</nav>

    Vous suffit ensuite de résoudre certains styles contradictoires entre .navbar-nav et .navbar-collapse en ajoutant ceci à votre CSS:

    @media (max-width:767px) {
    .navbar-nav.navbar-collapse {
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
    }
}

    Voici un démo de violon

    Génial!! Merci!!!!!
    Merci pour cette solution. J'ai aussi trouvé qu'il était nécessaire d'ajouter margin-top:0; et margin-bottom:0; à la .navbar-nav.navbar-collapse les styles ci-dessus, sinon le vertical par défaut des marges de provoquer un léger saut lorsque la .navbar-nav diapositives fermée. Voici un modifié violon
    J'ai regardé un jQuery solution à mettre en œuvre la Recherche, et ne réalisent pas que vous pouvez simplement reproduire Bootstrap bouton menu. Venez pour penser à elle, ce devrait être une partie de l'Amorçage des docs comme réductible de Recherche est une commune sensible motif de trop. Merci pour la solution intelligente!

    OriginalL'auteur koala_dev