引导按钮下拉菜单未显示在我的 Rails 应用程序中答案

【问题标题】：Bootstrap button dropdown not showing in my Rails application引导按钮下拉菜单未显示在我的 Rails 应用程序中
【发布时间】：2014-04-08 22:38:55
【问题描述】：

我的 Rails 4 应用程序具有以下项目的 edit.html.haml 视图：

%h1
  Edit Project
  .actions
    = link_to 'Browse', projects_path, :class => 'btn'
    = link_to 'View', project_path, :class => 'btn'
    - if ((@project.teams.map { |t| t.user_id }.include? current_user.id) || is_admin?)
      %a.btn.dropdown{:hfref => '#', :data => {:toggle => 'dropdown'}}
        = 'Time'
        %span.caret
        %ul.dropdown-menu{:role => 'menu', 'aria-labelledby' => 'dLabel'}
          %li
            = link_to 'Submitted', billables_path(:project_id => @project.id, :status => 'Submitted')
          %li
            = link_to 'Totalled', billables_path(:project_id => @project.id, :status => 'Totalled')
          %li
            = link_to 'Adjusted', billables_path(:project_id => @project.id, :status => 'Adjusted')
          %li
            = link_to 'Billed', billables_path(:project_id => @project.id, :status => 'Billed')
      = link_to 'Software', tools_path(:project_id => @project.id), :class => 'btn'
      = link_to 'Expense', expenses_path(:project_id => @project.id), :class => 'btn'
    = render :partial => 'team', :locals => { :project => @project }

= render :partial => 'form'

我不知道为什么当我点击下方有四个菜单项的“时间”按钮时下拉菜单不显示。浏览器控制台没有显示任何错误。

【问题讨论】：

标签： ruby-on-rails drop-down-menu twitter-bootstrap-2

【解决方案1】：

您是否正在加载 Bootstrap 的 javascript 文件？该下拉菜单与 bootstrap.js 中包含的下拉 javaScript 插件交互。

【讨论】：

是的，我正在加载 javascript 文件。我的导航栏中的下拉菜单完美运行。这是我试图在编辑页面上显示的附加菜单。
道歉。下拉菜单真的出现了！但不是从链接中掉下来，而是在左下角弹出！有点奇怪？
文档说它可能需要额外的定位。那是一个CSS问题。你使用的是那个版本的引导程序？

【解决方案2】：

我想通了。我正在为可能感兴趣的人发布我的解决方案。这是修改后的代码，可以按我的意愿工作：

%h1
  Edit Project
  .actions
    = link_to 'Browse', projects_path, :class => 'btn'
    = link_to 'View', project_path, :class => 'btn'
    - if ((@project.teams.map { |t| t.user_id }.include? current_user.id) || is_admin?)
      %span.dropdown
        %a.dropdown-toggle{:role => 'button', :href => '#', :data => {:toggle => 'dropdown'}, :class => 'btn'}
          = 'Time'
          %b.caret
        %ul.dropdown-menu{:role => 'menu', 'aria-labelledby' => 'dLabel'}
          %li
            = link_to 'Submitted', billables_path(:project_id => @project.id, :status => 'Submitted')
          %li
            = link_to 'Totalled', billables_path(:project_id => @project.id, :status => 'Totalled')
          %li
            = link_to 'Adjusted', billables_path(:project_id => @project.id, :status => 'Adjused')
          %li
            = link_to 'Billed', billables_path(:project_id => @project.id, :status => 'Billed')
      = link_to 'Software', tools_path(:project_id => @project.id), :class => 'btn'
      = link_to 'Expense', expenses_path(:project_id => @project.id), :class => 'btn'
    = render :partial => 'team', :locals => { :project => @project }

= render :partial => 'form'

确实是 CSS 和 HTML 的问题。 1. 注意下面的 %span.dropdown -if.. 它确保链接或按钮与其他链接或按钮保持一致。有了这个微小的改变，一切都奏效了。

@Papzord，感谢您尝试帮助我。

【讨论】：