私のnavbarのドラッグダウンをモバイルで試してみよう

Question

基本的に、データトグルとデータターゲットを使用して、自分のウェブサイトがモバイルのときにドロップダウンメニューが表示されるようにします。しかし、それは動作していないようです。ここにここに私のコードの一部

<div class="container"> 

    <a href = "#" class="navbar-brand">Chey</a> 

    <button class = "navbar-toggle"data-toggle = "collapse" data-target = ".navHeaderCollapse"> 
    F 
    </button> 

<div class="collapse navbar-collapse navHeaderCollapse"> 

    <ul class = "nav navbar-nav navbar-right"> 

    <li><a href = "#">Home</a></li> 
    <li><a href = "#">About</a></li> 
    <li><a href = "#">Contact</a></li> 

    </ul> 


    </div> 

Answer 1

ブートストラップを使用するときは、目的の効果を得るために完全なナビゲーションバーマークアップを使用する必要があります。ここにはBootstrap Navbarsというドキュメントがあります。ブートストラップ・ナビゲーバの理解を深めるために、このドキュメントを読んでください。マークアップは次のようになります。ここで

<nav class="navbar navbar-default"> 
    <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" 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> 
      </button> 
      <a class="navbar-brand" href="#">Bootstrap Navbar</a> 
     </div> 
     <div class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav navbar-right"> 
       <li class="active"><a href="#">Home</a></li> 
       <li><a href="#">About</a></li> 
       <li><a href="#">Contact</a></li> 
      </ul> 
     </div> 
    </div> 
</nav> 

はあなたのナビゲーションバーを使用すると、ナビゲーションバー-逆の代わりに、ナビゲーションバー、デフォルトを使用することができ、暗い色を持っているしたい場合は、これはBootstrap Navbar Fiddle Demo

をどのように動作するかをお見せするためにフィドルで、あなたはナビゲーションバーをしたい場合それはトップにフィーリングされ、私がフィドルでやったようにnavbar-fixed-topのクラスを追加することができます。

これは、ブートストラップナビバーの正しいマークアップです。ステファン・ヤンから別の答えがあります。この答えでは、2つのnavbar-header divの浮動左右があります。この練習にはいくつかの問題があります。主なことは、幅が767px未満で、メニュー切り替えボタンをクリックしてメニューをさらに幅広くサイズ変更しても、メニューがまだ折りたたまれていれば、Navbarに問題があることです。これは、767pxより大きい横長解像度と767pxより小さい縦長解像度のデバイスでは問題になります。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"/> 
 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<nav class="navbar navbar-default"> 
 
    <div class="container"> 
 
     <div class="navbar-header"> 
 
      <button type="button" 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> 
 
      </button> 
 
      <a class="navbar-brand" href="#">Bootstrap Navbar</a> 
 
     </div> 
 
     <div class="navbar-collapse collapse"> 
 
      <ul class="nav navbar-nav navbar-right"> 
 
       <li class="active"><a href="#">Home</a></li> 
 
       <li><a href="#">About</a></li> 
 
       <li><a href="#">Contact</a></li> 
 
      </ul> 
 
     </div> 
 
    </div> 
 
</nav>

Answer 2

はあなたを助けるかもしれないあなたのHTMLコードに基づいていますJSFiddleです：https://jsfiddle.net/RxguB/341/

私はあなたのnabberであると仮定していますBootstrapに基づいて、他のカスタムCSSはありませんので、ナビゲーションバーをBootstrap形式に合わせるために、数行のコードを追加するだけです。

<div class="navbar navbar-default navbar-fixed-top"> 
    <div class="container"> 
     <div class="navbar-header pull-left">  
      <a class="navbar-brand" href="#">Chey</a> 
     </div> 
     <div class="navbar-header pull-right"> 
      <button type="button" class="navbar-toggle" 
       data-toggle="collapse" data-target=".navHeaderCollapse"> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
     </div> 
     <div class="navbar-collapse collapse navHeaderCollapse"> 
      <ul class="nav navbar-nav navbar-right"> 
       <li class="active"><a href="#">Home</a></li> 
       <li><a href="#">About</a></li> 
       <li><a href="#">Contact</a></li> 
      </ul> 
     </div> 
    </div> 
</div> 

Answer 3

あなたがJavaScriptファイルが含まれていますか？ファイルはすべてのプラグインが含まれていることを

• bootstrap.jsまたはbootstrap.min.js

。