試圖讓我的導航欄拖動到移動

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。閱讀本文檔以更好地瞭解引導程序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的類，就像我在小提琴上做的那樣。

這是自舉導航欄的正確標記。 Steff Yang還有另一個答案。在這個答案中，他有2個navbar-header div左右浮動。這種做法有幾個問題。主要是如果你的寬度小於767px，點擊菜單切換按鈕，然後在菜單仍然摺疊的時候將窗口的大小調整爲更大的寬度，那麼你將會遇到導航欄的問題。這對於橫向分辨率大於767像素，肖像小於767像素的設備而言是有問題的。

<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

的文件包含所有插件。

script(src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js')