how to collapse bootstrap navbar from the side

 

How to collapse bootstrap navbar from the side?

If you view this Bootstrap template self starter on a phone or by reducing your browser windows width then the navbar only shows project name. You can then view the whole menu by clicking on the small button on the side.

How can I change this to something similar to what stripe.com has for mobile browsers?

there navbar is from the side

Bootstrap 3

Take a look at this "Off-canvas" sidebar example on Bootply. You'll see that the nav-collapse fills in from the right-side on smaller viewports.

Bootstrap 4 :

Create a responsive navbar sidebar "drawer" in Bootstrap 4?

Try this

Befor you have bootstrap-combined.min.css file and <meta name="viewport" content="width=device-width, initial-scale=1.0"> in 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

链接地址: http://www.djcxy.com/p/75388.html

上一篇: 在python中解释来自照片的exif数据的GPS信息

下一篇: 如何从侧面折叠bootstrap导航栏