折りたたみメニューのブートストラップの配置が悪い

Question

私はメニューをブートストラップと反応させようとしています。

私の現在のメニューです。崩壊させようとしていますが、現在は消えていて、アイコンは表示されません（3行あります）。私が間違っていることについて何か提案はありますか？さて、私は色が間違っていたとしてCSSが表示されていないことを理解しました。私はそれを白くしました、そして今、それは現れます。しかし、それは少しバギーですが、それはメニューが底部の隣に現われ、そしてすぐにそれを下に移動させます。これを修正するにはどうしたらいいですか？

<div class="navbar-header"> 

<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="width-navigation table-cell table-right navbar-collapse collapse"> 
        <ul class="nav navbar-nav menu-main-menu"> 
         <li class="menu item"><a href="#">home</a></li> 
         <li class="menu item"><a href="#">test1</a></li> 
         <li class="menu item"><a href="#">test2</a></li> 
         <li class="menu item"><a href="#">test3</a></li>   
        </ul>   
</div> 


@media (max-width: 991px) { 
    .navbar-header { 
     float: none; 
    } 
    .navbar-left,.navbar-right { 
     float: none !important; 
    } 
    .navbar-toggle { 
     display: block; 
    } 
    .navbar-collapse { 
     border-top: 1px solid transparent; 
     box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); 
    } 
    .navbar-fixed-top { 
     top: 0; 
     border-width: 0 0 1px; 
    } 
    .navbar-collapse.collapse { 
     display: none!important; 
    } 
    .navbar-nav { 
     float: none!important; 
     margin-top: 7.5px; 
    } 
    .navbar-nav>li { 
     float: none; 
    } 
    .navbar-nav>li>a { 
     padding-top: 10px; 
     padding-bottom: 10px; 
    } 
    .collapse.in{ 
     display:block !important; 
    } 
} 
.navbar-toggle .icon-bar { 
    background-color: white; 
    border-color: white; 

}

Answer 1

私はあなたのナビゲーションバーの構造が間違っていると思います。

でドキュメントを確認してください：http://getbootstrap.com/components/#navbar

あなたは正しくjQueryのを呼び出していますか？

は忘れないでください： 第一：第二jquery.min.js を呼び出します。bootstrap.min.js

があなたのコードの後に​​スクリプトを呼び出す呼び出します。

PS：タグの前にこれらのファイルを呼び出すのが好きです。