Boostrap 3 navbar collapse

我不能为我的生活弄清楚为什么我的导航栏不会崩溃。我带了正常的bootstram js和css文件以及转换和折叠js文件。以下是我的代码如下。任何帮助将不胜感激。Boostrap 3 navbar collapse

<nav class="navbar navbar-inverse navbar-fixed-top"> 
    <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">LandingExample</a> 
    </div> 
    <div class="collapse navbar-collapse" id="myNavBar"> 
    <ul class="nav navbar-nav"> 
     <li class="active"><a href="./index.html">Home</a></li> 
     <li><a href="./fallpage.html">About Us</a></li> 
     <li><a href="">Submit Form</a></li> 
     <li><a href="./fallpage.html">Contact Us</a></li> 
    </ul> 
    <ul class="nav navbar-nav navbar-right"> 
     <li><a href="./fallpage.html"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li> 
     <li><a href="./fallpage.html"><span class="glyphicon glyphicon-log-in"></span> Login</a></li> 
     <li><img class="product-select-logo" width = "34.8" height="38.4" src="http://static.hsappstatic.net/style_guide/static-8.123/img/logos/hubspot/sprocket-64.png"></li> 
    </ul> 
    </div> 
    </div> 
</nav>

来源

2016-04-24 Peter3

在你的代码的4号线，写'DATA- target =“＃myNavBar”'（注意大写的“B”）。因为在第11行中，您将div的ID写为“myNavBar”。 –

是的！谢谢！非常棒。上帝，我对代码有这样的爱/恨。 – Peter3

我不明白为什么有些人在导航栏中使用列表标签时，你不需要它们。总之，这里是一个HTML5折叠菜单技术，你可能想：

<nav style="position:absolute; left:20px; top:50px;"> 

<div onclick="TheBox.removeAttribute('open');"> 

<details id="TheBox"><summary>Choices</summary> 

<a href="javascript:void(0)" target="_blank" title="">Home</a><br> 
<a href="javascript:void(0)" target="_blank" title="">About</a><br> 
<a href="javascript:void(0)" target="_blank" title="">Products</a><br> 
<a href="javascript:void(0)" target="_blank" title="">Services</a><br> 
<a href="javascript:void(0)" target="_blank" title="">Contact</a> 

</details></div></nav>

来源

2016-04-24 17:05:53 user6245342

我从w3schools了解了我的导航栏的基础知识，也许这就是人们使用它们的原因。 – Peter3

这出来更多的只是一个下拉列表，然后崩溃导航栏 – Peter3

有什么区别？ :) – user6245342

请使用这个网站..我觉得你的问题是解决了..

<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="#">LandingExample</a> 
    </div> 
    <div class="collapse navbar-collapse" id="myNavbar"> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a href="./index.html">Home</a></li> 
     <li><a href="./fallpage.html">About Us</a></li> 
     <li><a href="">Submit Form</a></li> 
     <li><a href="./fallpage.html">Contact Us</a></li> 
    </ul> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><a href="./fallpage.html"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li> 
     <li><a href="./fallpage.html"><span class="glyphicon glyphicon-log-in"></span> Login</a></li> 
     <li><img class="product-select-logo" width = "34.8" height="38.4" src="http://static.hsappstatic.net/style_guide/static-8.123/img/logos/hubspot/sprocket-64.png"></li> 
    </ul> 
    </div> 
    </div> 
</nav>

来源

2016-05-03 06:49:42 shuvasish

Boostrap 3 navbar collapse

回答

相关问题