Bootstrap 3 on Rails 4导航崩溃按钮不起作用

当引导程序折叠导航时，如果按钮出现问题，带3个按钮的按钮将不起作用。Bootstrap 3 on Rails 4导航崩溃按钮不起作用

使用Rails 4.0.2，引导3

<nav class="navbar navbar-default" role="navigation"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <%= link_to "WorkIt", root_path, class: "navbar-brand" %> 
    </div> 
    <div class="collapse navbar-collapse" id="#bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav"> 
     <li><%= link_to "Clients", clients_path %></li> 
     <li><%= link_to "Orders", orders_path %></li> 
     <% if user_signed_in? %> 
     <li><p class="navbar-text"><%= current_user.email %></p></li> 
     <li><%= link_to 'Logout', destroy_user_session_path, :method => :delete %></li> 
     <% else %> 
     <li><p class="navbar-text">You are not signed in.</p></li> 
     <li><%= link_to 'Login', new_user_session_path %></li> 
     <% end %> 
     </ul> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><a href="#">Link</a></li> 
     <li class="dropdown"> 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> 
     <ul class="dropdown-menu"> 
      <li><a href="#">Action</a></li> 
      <li><a href="#">Another action</a></li> 
      <li><a href="#">Something else here</a></li> 
      <li class="divider"></li> 
      <li><a href="#">Separated link</a></li> 
     </ul> 
     </li> 
    </ul> 
    </div> 
</div> 
</nav>

Application.html.erb

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <title>WorkTiagotscha</title> 
    <%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %> 
    <%= javascript_include_tag "application", "data-turbolinks-track" => true %> 
    <%= csrf_meta_tags %> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    </head> 
    <body> 
<div class="container"> 
    <%= render "layouts/nav" %> 
    <p class="notice"><%= notice %></p> 
     <p class="alert"><%= alert %></p> 
    <%= yield %> 
</div> 
    </body> 
</html>

我发现下拉工作，这就是为什么有那里有一个测试下拉列表。

我使用了大部分的解决方案，我可以找到有关下拉式不在轨道上工作，但我认为问题只是按钮，可能是一个小东西，但我跑出了选项。

Bootstrap.js不是重复，不是耙资产：干净的作品。

来源

2014-02-17 ttscha

你加'meta'标签，你的代码？查看此链接了解更多信息http://getbootstrap.com/getting-started/ – Thanh

@KienThanh“meta”标签不是问题。他在HTML中输入错误的“id”。 – Sachin

从ID属性

<div class="collapse navbar-collapse" id="#bs-example-navbar-collapse-1">

删除#应该

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

确保您还添加了bootstrap.min.js脚本文件。

JS Fiddle Demo

来源

2014-02-17 15:15:05 Sachin

谢谢，data-targer必须有＃，而div.collapse上的id没有。 – ttscha

Bootstrap 3 on Rails 4导航崩溃按钮不起作用

回答

相关问题