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

回答

相關問題