Boostrap 3 navbar collapse

Question

私の人生にとって、私のnavbarが崩壊しない理由を理解できません。私は通常のブートストラップのjsとcssファイルを移行と一緒に持ち込み、jsファイルを崩壊させます。以下は私のコードです。どんな助けでも大歓迎です。

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

Answer 1

ナビゲーションバーでリストタグを使用している人がいる理由はわかりません。とにかく、ここであなたが好きかもしれ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> 

Answer 2

`データ - を書き、.. ..私はウル問題は解決だと思うあなたのコードの第四行で

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