Bootstrap 3.0.0 nav verticale effondrement sensible

Après beaucoup de recherche sans résultats, j'essaie d'envoyer un post.

Je suis à la recherche d'un moyen pour le nav-stack (menu vertical) à partir de bootstrap 3.0.0 (http://getbootstrap.com/components/#nav-pills) ou mon sidebare devient effondré lors de la tablette ou le smartphone est utilisé (comme la barre de navigation).

Je suis d'accord pour utiliser d'autres composants que nav-stack si le résultat est un vertical menu responsive.

Mon code

         <div class="col-md-2">
            <div class="panel panel-default" id="sidebar" >
            <div class="panel-heading" style="background-color:#888;color:#fff;" data-target="#test">Sidebar</div> 
            <div class="panel-body" id="test">
            <ul class="nav nav-stacked nav-collapse">
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>

            </ul>

              <hr>

            <div class="col col-span-12">
              <i class="icon-2x icon-facebook"></i>&nbsp;
              <i class="icon-2x icon-twitter"></i>&nbsp;
              <i class="icon-2x icon-linkedin"></i>&nbsp;
              <i class="icon-2x icon-pinterest"></i>
            </div>

            </div><!--/panel body-->
          </div><!--/panel-->
        </div><!--/end left column-->

Je vous remercie d'avance pour votre aide 🙂

Découvrez cet article: Création d'un RWD Hors de la zone de travail de Mise en page avec Bootstrap 3

OriginalL'auteur David-IT | 2013-09-19

  1. 10

    Est ce que c'est ?

    <div class="col-md-2">
    <nav class="navbar navbar-default" role="navigation">

        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>

        <div class="collapse navbar-collapse">
            <div class="panel-heading">Sidebar22</div>
            <ul class="nav nav-stacked">
                <li class="active"><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>              
            </ul>


        </div><!-- /.navbar-collapse -->
    </nav>

</div><!--/end left column-->

<div class="col-md-10">
</div>

    Vérifier violon.

    Parfait. Le dernier problème est de savoir comment le fermer par défaut sur mobile ?
    Je suis désolé, voulez-vous voulez-vous la reformuler?
    Le problème est que par défaut, le menu est à déballer. Comment dois-je faire pour envelopper le menu par défaut sur mobile ?
    jsfiddle.net/s4Bb8/27 - Par défaut Bootstrap sera basé sur la taille de l'écran.
    Fonctionne parfaitement !!

    OriginalL'auteur Deja Vu