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”的元素，并且您将“.nav-collapse”作为ID，因此您需要取消该点。

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

这是一个fiddle，我更改了一些类和一些东西以使菜单可见。因为如果你没有合适的CSS，那就像这样搞砸了。

请注意，您应该始终参考bootstrap文档，并尝试坚持使用他们的方法来使您的菜单或其他任何工作完美无缺。

我看到你已经把这个课程“拉到右边”用于菜单，有一个名为“navbar-right”的课程效果更好，我认为只需将菜单拉到右边。

Bootstrap折叠菜单不起作用

1 个答案: