繁体   English   中英

Bootstrap NavBar汉堡菜单在移动设备上不起作用

Bootstrap NavBar Hamburger Menu not working on Mobile

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

当我在Mac上缩小窗口时,会出现汉堡菜单,但在移动设备上却没有。 导航栏变得非常无格式。 任何帮助将不胜感激。 谢谢!

    <nav class="navbar navbar-inverse">
  <div class="container">
    <div class = "row">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
        </button>
      </div>
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
          <li><%= link_to "HomePage", listings_path %></li>
          <li><%= link_to "Reviews", reviews_path %> </li>
          <li><%= link_to "My Personal Listings", mylistings_path %></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Admin<span class="caret"></span></a>
              <ul class="dropdown-menu">
                <%if user_signed_in? && current_user.admin? %>
                  <li><%= link_to "Admin Page", users_path %></li>
                  <li><%= link_to "Add a Personal Listing", new_mylisting_path %></li>
                <%end%>
              </ul>
            </li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Your Account <span class="caret"></span></a>
                  <ul class="dropdown-menu">
                    <li><%= link_to 'Sign In', new_user_session_path %></li>
                    <li><%= link_to 'Sign Up', new_user_registration_path %></li>
                    <li><%= link_to('Sign Out', destroy_user_session_path, :method => :delete) %></li>
                  </ul>
                </li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Additional Resources<span class="caret"></span></a>
                  <ul class="dropdown-menu">
                    <li><%= link_to 'Zillow', "http://www.zillow.com/", :target => "_blank"%></li>
                    <li><%= link_to 'Realtor.com', "https://www.realtor.com/", :target => "_blank"%></li>
                    <li><%= link_to "Multiple Listing Service", "http://www.mls.com/", :target => "_blank"%></li>
                    <li><%= link_to 'Trulia', "https://www.trulia.com/", :target => "_blank"%></li>
                    <li><%= link_to 'Redfin', "https://www.redfin.com/", :target => "_blank"%></li>
                    </ul>
                    </li>
                  </ul>
          </div>
        </div>
      </div>
  </nav>
1 个回复

工作正常。 您没有添加后两个图标栏。 请参见下面的代码段或codepen

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <nav class="navbar navbar-inverse"> <div class="container"> <div class = "row"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li><%= link_to "HomePage", listings_path %></li> <li><%= link_to "Reviews", reviews_path %> </li> <li><%= link_to "My Personal Listings", mylistings_path %></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Admin<span class="caret"></span></a> <ul class="dropdown-menu"> <%if user_signed_in? && current_user.admin? %> <li><%= link_to "Admin Page", users_path %></li> <li><%= link_to "Add a Personal Listing", new_mylisting_path %></li> <%end%> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Your Account <span class="caret"></span></a> <ul class="dropdown-menu"> <li><%= link_to 'Sign In', new_user_session_path %></li> <li><%= link_to 'Sign Up', new_user_registration_path %></li> <li><%= link_to('Sign Out', destroy_user_session_path, :method => :delete) %></li> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Additional Resources<span class="caret"></span></a> <ul class="dropdown-menu"> <li><%= link_to 'Zillow', "http://www.zillow.com/", :target => "_blank"%></li> <li><%= link_to 'Realtor.com', "https://www.realtor.com/", :target => "_blank"%></li> <li><%= link_to "Multiple Listing Service", "http://www.mls.com/", :target => "_blank"%></li> <li><%= link_to 'Trulia', "https://www.trulia.com/", :target => "_blank"%></li> <li><%= link_to 'Redfin', "https://www.redfin.com/", :target => "_blank"%></li> </ul> </li> </ul> </div> </div> </div> </nav> 

1 Bootstrap 3 Navbar在移动设备上不起作用

我的Bootstrap导航栏无法在手机视图上使用(无法显示链接时)。 我无法单击该按钮。 在对Internet和StackOverflow进行了大量研究之后,我尝试了该解决方案,但没有人起作用。 这些是我尝试过的解决方案。 验证data-target和id 。 如此处 检查 ...

4 Bootstrap 3响应式下拉悬停菜单在移动设备上不起作用

我想创建一个带有下拉菜单的响应菜单。 到目前为止,它可以在台式机上运行,​​但不能在移动设备上运行(我正在iPhone 5s上进行测试)。 这是我的代码: 我尝试通过两种方法解决该问题: 1.我试图添加jquery(但是后来我意识到我不足以独自编写一个好的代码)-我还读到 ...

6 下拉菜单在移动设备上不起作用

我有一个简单的下拉菜单,无法在移动设备上正常工作。 它在桌面上运行良好,当我将其悬停在菜单上时,将其隐藏,但是当我在IOS或android中点击菜单项时,它会显示子菜单,但是即使我点击,它也保持这种状态再次父项。 理想情况下,它应该:点击打开菜单,再次点击父项-关闭菜单。 的HTM ...

7 Blogger子菜单在移动设备上不起作用

我有一个简单的下拉菜单,无法在移动设备上正常工作。 它在桌面上运行良好,当我将鼠标悬停在菜单上时将其滑下,当我将其隐藏时,所有页面都运行良好,但是在android中,当我点击菜单项时它会显示子菜单,但是当我单击时会打开一个空白网址为url的页面:“关于:空白#已阻止” 我怎样才能解决这个 ...

8 html 菜单在移动设备上不起作用

我有一个 asp.net 项目。 这是我的菜单: 问题是此菜单在移动设备上不起作用。 我删除了最后一个&lt;li&gt; 。 但问题仍然存在。 如何修复此菜单以在移动设备上使用? ...

9 左菜单在移动设备上不起作用

我有一个左菜单,还有一个元素: 网址为/ dada的示例(示例) 在计算机上,一切正常,但是在移动设备上,当我单击此元素时,不会加载新页面,我在selectMenu中插入了一个警报,以检查事件侦听器是否正常运行。 单击后,a元素保持焦点。 我有SEO网址 为什么在移动设 ...

10 下拉菜单在移动设备上不起作用

我看过很多关于类似问题的文章,花了数小时寻找,但是这些修复似乎都不适合我。 我正在直接从CDN使用最新版本的引导程序。 我有一个带有可悬停桌面的下拉菜单的导航菜单。 这些工作正常,但是您可以想象在移动设备上无法运行。 香港专业教育学院尝试了许多建议的修复程序,但仍然面临相同的问题 ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2021 STACKOOM.COM