Bootstrap导航栏崩溃但不会显示在大屏幕上
问题描述:
我的代码工作正常,但我决定添加一个汉堡按钮,现在我遇到了问题。Bootstrap导航栏崩溃但不会显示在大屏幕上
该按钮工作正常,但是当我的屏幕大于断点时,我的屏幕上没有显示导航。我确定这是一个缺少标签或其他东西的问题,但我看不到它并可以使用一些帮助。我有jQuery和Bootstrap 3和CSS加载。
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-
toggle="collapse" data-target="#collapsemenu" aria-expanded="false">
<span class="src-only">Menu</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">LORI</a>
</div>
<div class="collapse navbar collapse" id="collapsemenu">
<ul class="nav navbar-nav">
<li><a href="#about">ABOUT</a></li>
<li><a href="#portfolio">PORTFOLIO</a></li>
<li><a href="#contact">CONTACT</a></li>
</ul>
</div>
</div>
</nav>
答
试试这个。此代码工作
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Lori</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</div>
</nav>