twitter-bootstrap Bootstrap 导航栏折叠覆盖菜单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31849943/
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
Bootstrap navbar collapse overlay menu
提问by Imat
Im trying to replicate this navbar collapse content(please see image below)
我正在尝试复制此导航栏折叠内容（请参见下图）
As you can see, once I click the hamburger menu, the content of navbar is shown in full screen instead of sliding it down. Is there any plugin or css snippet that I could use to achieve this? Thanks for your help.
如您所见，一旦我单击汉堡菜单，导航栏的内容就会全屏显示，而不是向下滑动。是否有任何插件或 css 片段可用于实现此目的？谢谢你的帮助。
回答by DavidDomain
Instead of using the collapsevalue for the data-toggleattribute targeting the collapse nav-bar you can use a modal. You can style the content of the modal how ever you like.
您可以使用模式，而不是使用针对折叠导航栏collapse的data-toggle属性值。您可以随意设置模态内容的样式。
Here is an example. I'm sure you'll get the idea.
这是一个例子。我相信你会明白的。
.navbar-toggle {
float: left !important;
margin-left: 15px;
margin-right: 0;
}
.modal-nav-content {
width: 100%;
height: auto;
}
.modal-nav-body {
margin-top: 100px;
}
.modal-nav-body ul {
list-style-type: none;
color: white;
margin: 0;
padding: 0;
width: 100%;
}
.modal-nav-body ul li {
text-align: center;
font-size: 130%;
padding: 8px;
text-transform: uppercase;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="modal" data-target="#nav-modal" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
</div>
</nav>
<!-- Modal -->
<div class="modal fade" id="nav-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-nav-content">
<div class="modal-nav-body">
<ul>
<li>Brand</li>
<li>Home</li>
<li>Tour</li>
<li>News</li>
</ul>
</div>
</div>
</div>
</div>