Question

我正在使用Bootstrap的responsive navbar。在移动设备中，会出现菜单图标，但点击它时没有下拉菜单。我浏览了SO，因为这似乎是一个常见的问题，但数据目标ID是正确的，这似乎是其他人都有的问题。我也无法发现JS中的任何错误，当我使用Chrome的Dev-tools检查页面时，没有任何错误被抛入控制台。这是我的HTML：

<nav class="navbar navbar-default navbar-area">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#responsive-navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <%= image_tag "logo-wide-small.png", :class => "img-responsive" %>
    </div>

    <div class="collapse navbar-collapse nav-links-area" id="responsive-navbar">
      <ul class="nav navbar-nav navbar-right">
        <li><%= link_to "Signup", '#' %></li>
        <li><%= link_to "Login", '#' %></li>
        <li><%= link_to "Language", '#' %></li>
        <li><%= link_to "JOIN NOW", '#', {:class => "btn btn-warning", :role => "button"} %></li>
      </ul>
    </div>
  </div>
</nav>

任何帮助你将不胜感激。此外，我使用Chrome的响应式网页设计测试程序测试了这一点，而不是实际的设备，不确定这是否有所作为。

Answer 1

html标记看起来不错，请尝试检查bootstrap.js是否包含 jQuery.js文件后如下：

<script src="/jQuery.js"></script>
<!--followed by the bootstrap script-->
<script src="/bootstrap.js"></script>

Answer 2

我遇到了同样的问题，我把它放在＆lt;％= yeild％＆gt;下它工作了

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>

Bootstrap / Rails - 可折叠导航栏不能在移动设备上工作

2 个答案: