rails使用bootstrap的下拉框突然失效

最近,一直在跟着Ruby On Rails Tutorial上的教程在学习rails,一开始做到布局时用到bootstrap-sass这个gem的时候,眼睛一亮,网页瞬间很亮了。。。可是,在做到第九章的时候「Account」的下拉框就失效了,不知道怎么了。。。这个是部署在heroku的本项目,大神们可以随便注册个,登录之后,右上角显示的「Account」下拉框,无法显示下拉菜单(包括:Profile, Setting, Sign out三个下拉菜单)。。。

这是相关的代码:

file: _header.html.erb
<header class="navbar navbar-fixed-top">
<div class="navbar-inner">
    <div class="container">
        <%= link_to "sample app", root_path, id: "logo" %>
        <nav>
        <ul class="nav pull-right">
            <li><%= link_to "Home", root_path %></li>
            <li><%= link_to "Help", help_path %></li>
            <% if signed_in? %>
                <li><%= link_to "Users", users_path %></li>
                <li id="fat-menu" class="dropdown">
                <a href='#' class="dropdown-toggle" data-toggle="dropdown">Account<b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li><%= link_to "Profile", current_user %></li>
                    <li><%= link_to "Settings", edit_user_path(current_user) %></li>
                    <li class="divider"></li>
                    <li>
                    <%= link_to "Sign out", signout_path, method: "delete" %>
                    </li>
                </ul>
                </li>
            <% else %>
            <li><%= link_to "Sign in", signin_path %></li>
        <% end %>
        </ul>
        </nav>
    </div>
</div>
</header>

这是全局的布局:

file: application.html.erb
<!DOCTYPE html>
<html>
<head>
  <title><%= full_title(yield :title) %></title>
  <%= stylesheet_link_tag    "application", :media => "all" %>
  <%= javascript_include_tag "application" %>
  <%= csrf_meta_tags %>
  <%= render 'layouts/shim' %>
</head>
<body>
    <%= render 'layouts/header' %>
    <div class="container">
        <% flash.each do |key,value| %>
            <%= content_tag(:div, value, class: "alert alert-#{key}") %>
        <% end %>
        <%= yield %>
    <%= render 'layouts/footer' %>
    <%= debug params if Rails.env.development? %>
    </div>
</body>
</html>
阅读 7.5k
2 个回答

大概是要这样?a和ul要在class="dropdown"的元素内部。

<li id="fat-menu" class="dropdown">
  <a href='#' class="dropdown-toggle" data-toggle="dropdown">Account<b class="caret"></b></a>
  <ul class="dropdown-menu">
新手上路,请多包涵

我也遇到了相同的问题
审查元素,如果发现报错:

Uncaught Error: Bootstrap's JavaScript requires jQuery

则可能是bootstrap在引入css前需要引用jQuery,但是这时还没有加载jQuery
你可以参考这个地址,看看能否解决

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进