comment l'effondrement de bootstrap barre de navigation à partir du côté

Comment l'effondrement de bootstrap barre de navigation sur le côté?

Si vous affichez cette Bootstrap, modèle self starter sur un téléphone, ou par la réduction de vos fenêtres de navigateur width puis le navbar affiche uniquement le nom du projet. Vous pouvez afficher le menu en cliquant sur le petit bouton sur le côté.

Comment puis-je le changer en quelque chose de semblable à ce que stripe.com a pour les navigateurs mobiles?

il navbar est du côté

OriginalL'auteur | 2013-11-06

  1. 4

    Bootstrap 3

    Prendre un coup d'oeil à ce "Off-canvas" barre latérale exemple sur Bootply. Vous verrez que le nav-collapse remplit à partir de la droite sur les petites fenêtres.

    Bootstrap 4:

    Créer un réactif barre de navigation sidebar "tiroir" dans le Bootstrap 4?

    OriginalL'auteur Zim

  2. 0

    Essayer cette

    Befor vous avez bootstrap-combined.min.css fichier et <meta name="viewport" content="width=device-width, initial-scale=1.0"> dans head section

    <div class="row-fluid">
<div class="navbar navbar-inverse">
  <div class="navbar-inner">
    <div class="container-fluid">
  <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>
  <div class="nav-collapse collapse">
  <ul class="nav">
   <li class="active"><a href="#"><i class="icon-home icon-white"></i> Home</a></li>
   <li><a href="#">Features</a></li>
   <li><a href="">Pricing</a></li>
   <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">More<b class="caret"></b></a>
    <ul class="dropdown-menu">
    <li><a href="#">Blog</a></li>
    <li><a href="#">About US</a></li>
    <li><a href="#">Jobs</a></li>
    </ul>
   </li>
       <li><a href="https://stripe.com/docs">Documentation</a></li>
        <li><a href="https://support.stripe.com/">Help &amp; Support</a></li>

        <li class="button"><a href="https://manage.stripe.com/login">Sign in</a></li>


    </ul>

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

 Fiddle

    Jsfiddle

    OriginalL'auteur Sridhar R