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導航崩潰按鈕不起作用

回答

相關問題