Question

我是Ror的新手，我开发了一个带有Webpack安装的Rails应用程序（ruby'2.3.4'，Rails 5.1.6）。在我的导航栏中，我没有成功部署下拉按钮以显示我的菜单项。而且我也找不到如何使它起作用。谢谢你的帮助.. :-) 这是我的代码：

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" %>&nbsp;
      <%= 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>

在我的Gemfile中，有一些宝石：

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 .

Answer 1

您需要的文档：https://getbootstrap.com/docs/3.3/components/#dropdowns

将下拉菜单的触发器和下拉菜单包装在.dropdown中，或者声明位置的另一个元素：relative;。然后添加菜单的 HTML。

看起来您需要将下拉按钮和下拉列表包装在具有下拉列表类的div中。

Answer 2

这是一个较晚购买的项目，希望对您有所帮助。

我在将import 'bootstrap/dist/js/bootstrap';添加到app/javascript/packs/application.js文件中解决了相同的问题。

从here获得它。我鼓励您阅读它，我认为它非常有用且有用。

[RAILS APP]：Bootstrap下拉菜单不起作用

2 个答案: