Bootstrap折疊菜單不起作用

Question

我剛剛安裝了bootstrap 3，但是折疊菜單不起作用。 該菜單在桌面屏幕上看起來不錯，但按菜單按鈕縮小孔的內容沒有顯示。

這是菜單的代碼：

<div id="menu">
<div class="navbar navbar-static-top" role="navigation">
  <div class="container">
  <a class="btn btn-navbar" data-toggle="collapse" data-target="#nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>

    <a class="navbar-brand" href="/"><img class="top-logo" src="img/hotels.nl_.jpg" alt="Hotels.nl"></a>
    <div id=".nav-collapse">
        <ul class="nav navbar-nav pull-right">

    <li class="active"><a href="#">Inloggen <span class="sr-only">(current)</span></a></li>
    <li><a href="#">Contact</a></li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Taal <span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><a href="#">Nederlands</a></li>
        <li><a href="#">English</a></li>
        <li><a href="#">German</a></li>
      </ul>
    </li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Valuta<span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><a href="#">Euro</a></li>
        <li><a href="#">Dollar</a></li>
        <li><a href="#">Pond</a></li>
      </ul>
    </li>
  </ul>
    </div>
  </div>
  </div><!--End container-->
</div><!--End fixedtop-->

Answer 1

假設您已經放入了jquery庫，並且在放入了bootstrap的js文件之后，我可以認為問題出在數據目標上。

您以id為“ nav-collapse”的元素為目標，並且以id為“ .nav-collapse”，因此需要刪除該點。

<div id="menu">
<div class="navbar navbar-static-top" role="navigation">
  <div class="container">
  <a class="btn btn-navbar" data-toggle="collapse" data-target="#nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>

    <a class="navbar-brand" href="/"><img class="top-logo" src="img/hotels.nl_.jpg" alt="Hotels.nl"></a>
    <div id="nav-collapse">
        <ul class="nav navbar-nav pull-right">

    <li class="active"><a href="#">Inloggen <span class="sr-only">(current)</span></a></li>
    <li><a href="#">Contact</a></li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Taal <span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><a href="#">Nederlands</a></li>
        <li><a href="#">English</a></li>
        <li><a href="#">German</a></li>
      </ul>
    </li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Valuta<span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><a href="#">Euro</a></li>
        <li><a href="#">Dollar</a></li>
        <li><a href="#">Pond</a></li>
      </ul>
    </li>
  </ul>
    </div>
  </div>
  </div><!--End container-->
</div><!--End fixedtop-->

這是一個小提琴 ，我更改了一些類和某些內容以使菜單可見。 因為如果您沒有合適的CSS，它就很像這樣。

並且請注意，您應該始終參考bootstrap docs，並嘗試堅持使用他們的方法來使菜單或其他任何東西都能正常工作。

而且我看到您已經為菜單添加了“向右拉”類，有一個名為“ navbar-right”的類比將菜單拉到我認為的右側效果更好。