我正在使用以下标记来创建可折叠的导航栏,但无法正常工作。
当屏幕尺寸变窄时,导航栏项只会消失,而不会折叠成带衬线的按钮。
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">My Project</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav pull-right">
<li class="active"><a href="./">Logout</a></li>
<li class="active"><a href="./">New Post</a></li>
</ul>
</div>
</div>
</div>
我的JS小提琴:链接
它可以工作,但是您需要一个切换按钮。
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">My Project</a>
<a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav pull-right">
<li class="active"><a href="./">Logout</a></li>
<li class="active"><a href="./">New Post</a></li>
</ul>
</div>
</div>
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句