twitter-bootstrap 如何从侧面折叠引导程序导航栏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19811368/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to collapse bootstrap navbar from the side
提问by
How to collapse bootstrap navbar from the side?
如何从侧面折叠引导程序导航栏？
If you view this Bootstrap template self starteron a phone or by reducing your browser windows widththen the navbaronly shows project name. You can then view the whole menu by clicking on the small button on the side.
如果您在手机上或通过缩小浏览器窗口查看此Bootstrap 模板自启动程序，width则navbar只会显示项目名称。然后，您可以通过单击侧面的小按钮查看整个菜单。
How can I change this to something similar to what stripe.com has for mobile browsers?
我如何将其更改为类似于 stripe.com 为移动浏览器提供的内容？
there navbar is from the side
侧面有导航栏
回答by Zim
Bootstrap 3
引导程序 3
Take a look at this "Off-canvas" sidebar example on Bootply. You'll see that the nav-collapsefills in from the right-side on smaller viewports.
看看Bootply上的这个“Off-canvas”侧边栏示例。您会nav-collapse在较小的视口上看到从右侧填充。
Bootstrap 4引导程序 4：
回答by Sridhar R
Try this
试试这个
Befor you have bootstrap-combined.min.cssfile and <meta name="viewport" content="width=device-width, initial-scale=1.0">in headsection
之前打个电话有bootstrap-combined.min.css文件，并<meta name="viewport" content="width=device-width, initial-scale=1.0">在head部分
<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 & 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
