我是Ror的新手，我开发了一个rails应用程序(ruby‘2.3.4’，rails 5.1.6(，并安装了webpack。在我的导航栏中，我无法成功地部署下拉按钮来显示我的菜单项。。我不知道该怎么做。。？谢谢你的帮助..：-(这是我的代码：
application.html.erb:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Find Golf Courses Accomodation</title>
<%= csrf_meta_tags %>
<%= action_cable_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%#= stylesheet_pack_tag 'application', media: 'all' %> <!-- Uncomment if you import CSS in app/javascript/packs/application.js -->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?keyXXXXXXXX&libraries=places"></script>
<%= javascript_include_tag 'application' %>
<%= javascript_pack_tag 'application' %>
<link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/hot-sneaks/jquery-ui.css">
</head>
<body>
<%= render 'shared/navbar' %>
<%= render 'shared/message' %>
<% if current_user %>
<input type="hidden" id="user_id" value="<%= current_user.id %>">
<% end %>
<!--container inside each page -->
<%= yield %>
</body>
</html>
shared/_navbar.html.erb:
<ul class="nav navbar-nav navbar-right">
<li>
<button class="btn btn-form btn-small">
<%= link_to "Become a host", new_room_path, style: "color: white; text-decoration: none;" %>
</button>
</li>
<% if (!user_signed_in?) %>
<li><%= link_to "Login", new_user_session_path %></li>
<li><%= link_to "Sign Up", new_user_registration_path %></li>
<% else %>
<li>
<%= link_to notifications_path do %>
<i class="fa fa-bell fa-2x icon-babu"></i>
<span class="badge" id="navbar_num_of_unread"><%= current_user.unread if current_user.unread > 0 %></span>
<% end %>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"
role="button" aria-haspopup="true" aria-expanded="false">
<%= image_tag avatar_url(current_user), class: "img-circle avatar-small" %>
<%= current_user.fullname %> <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><%= link_to "Dashboard", dashboard_path %></li>
<li><%= link_to "Manage Listing", rooms_path %></li>
<li><%= link_to "List Your Space", new_room_path %></li>
<li><%= link_to "Your Reservations", your_reservations_path %></li>
<li><%= link_to "Your Trips", your_trips_path %></li>
<li role="separator" class="divider"></li>
<li><%= link_to "Edit Profile", edit_user_registration_path %></li>
<li><%= link_to "Log out", destroy_user_session_path, method: :delete %></li>
</ul>
</li>
<% end %>
</ul>
在我的宝石文件中，我的一些宝石：
gem 'pg', '~> 0.21'
gem 'puma'
gem 'rails', '5.1.6'
gem 'redis', '3.0.0'
gem 'coffee-rails', '~> 4.2.0'
gem 'turbolinks', '~> 5'
gem 'jbuilder', '~> 2.0'
gem 'autoprefixer-rails'
gem 'bootstrap-sass', '~> 3.3'
gem 'font-awesome-sass', '~> 5.0.9'
gem 'sass-rails'
gem 'simple_form'
gem 'uglifier'
gem 'webpacker'
gem 'devise'
gem 'jquery-rails'
gem 'jquery-ui-rails', '~> 5.0'
....
application.scss:
// Graphical variables
@import "config/fonts";
@import "config/colors";
@import "config/bootstrap_variables";
// External libraries
@import "font-awesome-sprockets";
@import "font-awesome";
@import "bootstrap-sprockets";
@import "bootstrap";
@import "toastr";
@import "fullcalendar";
// Your CSS partials
@import "layouts/index";
@import "components/index";
@import "pages/index";
application.js:
//= require jquery
//= require bootstrap-sprockets
//= require rails-ujs
//= require jquery-ui/datepicker
//= require jquery-ui/slider
//= require toastr
//= require moment
//= require fullcalendar
//= require card
//= require Chart.bundle
//= require chartkick
//= require cable
//= require_tree .
您需要的文档：https://getbootstrap.com/docs/3.3/components/#dropdowns
将下拉菜单的触发器和下拉菜单包装在.downdown中，或声明位置的另一个元素：relative；。然后添加菜单HTML。
看起来您需要将下拉按钮和下拉列表包装在具有下拉类的div中。
这有点晚买，希望能帮助到别人。
我有同样的问题，通过将import 'bootstrap/dist/js/bootstrap';添加到app/javascript/packs/application.js文件来解决它。
从这里得到的。我鼓励你阅读它，我觉得它非常有用，内容丰富。