Bootstrap导航栏折叠覆盖菜单

Question

我试图复制此导航栏折叠内容（请参见下图）

如您所见，单击汉堡菜单后，导航栏的内容将以全屏显示，而不是向下滑动。 有没有我可以用来实现这个的插件或CSS代码片段？ 谢谢你的帮助。

Answer 1

您可以使用模式，而不是使用折叠导航栏的data-toggle属性的collapse值。 您可以根据自己的喜好设置模态的内容。

这是一个例子。 我相信你会明白的。

 .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>