bootstrap - pile de menu horizontale

J'ai créé un menu avec des outils rétractables classe .nav-collapse dans le bootstrap. Quand j'ai redimensionner la fenêtre disparaît. J'ai donc surdéfini .nav-collapse classe avec ce css:

.nav-collapse, .nav-collapse.collapse {
    height: auto;
    overflow: visible;
}

Ce n'est pas de la manière souhaitée de le faire à chaque fois. Jetez un oeil à ce jsfiddle et supprimer au-dessus de style css. Il sera plus facile à comprendre.

QUESTION: Est-il un simple construit en solution pour l'empilage de menu horizontale dans le bootstrap?

  • Il serait mieux si vous avez complété votre question avec un exemple de code sur jsfiddle.net
  • Bodicherla édité ma question et a ajouté jsfiddle
InformationsquelleAutor Morpheus | 2013-05-13
  1. 3

    Bootstrap n'ont construit dans l'empilement : http://twitter.github.io/bootstrap/components.html#navs

    Ce serait la bonne mise en page pour .nav-collapse dans votre situation:

    <div class="top-nav">
    <div class="container-fluid">
        <div class="nav-collapse collapse">
            <ul class="nav nav-tabs">
                <li><a href="#">Item1</a></li>
                <li><a href="#">Item2</a></li>
                <li><a href="#">Item3</a></li>
            </ul>
        </div><!--/.nav-collapse -->
    </div>
</div>

    Alors ce que je voudrais faire est de remplacer la valeur par défaut des requêtes de média à partir de bootstrap-responsive.css dans un autre bootstrap-overrides.css:

    @media (max-width: 979px) {
    .top-nav .nav-collapse, .top-nav .nav-collapse.collapse {
        height: auto;
        overflow: visible;
    }
}

    violon

    • Le point est que je ne veux pas avoir l'icône et de manière générale, je voudrais trouver quelque chose de semblable à ce que j'ai maintenant.
    • Bien dans ce cas, vous pouvez simplement remplacer la valeur par défaut des requêtes de média qui cache le menu, voir mes modifications et également ceci : jsfiddle.net/dcd018/Y5YjV/14
    • C'est ce que j'ai déjà fait dans mon premier jsfiddle exemple. Je voudrais éviter primordial de base de bootstrap
    • Votre pas réellement de substitution de la base de css si vous ajoutez la classe parent .top-nav.
    InformationsquelleAutor Dan
  2. 0

    Si vous utilisez la "valeur liquidative" de la classe, au cours de la redimensionner, il sera transformé en boutons. Votre demande peut être obtenu en utilisant "nav-stack" de la classe.Regardez cet exemple http://twitter.github.io/bootstrap/components.html#navs -> Empilables

    • Pouvez-vous faire un exemple pour obtenir mon résultat souhaité avec stackable?
    InformationsquelleAutor Nobal Mohan