我是 Rails 开发新手。我正在创建一个 Rails 应用程序。其中我使用的是 Bootstrap 4.0.0 beta。我有一个导航栏，特别是 div(不在整个页面上)。但问题是，当我点击下拉菜单时，它不起作用。首先，我必须先点击导航品牌，然后我可以点击下拉菜单，它就可以工作了。但它改变了导航栏的整个位置。如果我再次单击导航品牌下拉菜单，则会停止工作。
我也尝试将它放在整个页面上也有同样的问题。
我有 ruby-2.4.1、rails-5.1.3、bootstrap-4.0.0beta
这是我的/assets/stylesheets/application.css 代码
*= require bootstrap
这是/assets/stylesheets/welcomeindex.css 代码
*= require bootstrap
*= require application
body, .jumbotron{
height: 100vh;
min-height: calc(100vh - 155px);
//overflow: hidden;
}
.jumbotron{
margin-bottom: 0px;
}
@media (max-width: 991px) {
.jumbotron{
height: 100%;
}
}
.footer {
position: fixed;
bottom: 0;
width: 100%;
height: 40px;
line-height: 40px;
background-color: #f5f5f5;
.container {
width: auto;
max-width: 680px;
padding: 0 15px;
}
}
这个application.js文件:
//= require jquery
//= require jquery_ujs
//= require popper
//= require turbolinks
//= require bootstrap-sprockets
//= require bootstrap
//= require_tree .
这是welcomeindex.html.erb 文件:
<html>
<head>
<title> Fest Management </title>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= stylesheet_link_tag 'welcomeindex', media: 'all', 'data-turbolinks-track' => true %>
</head>
<body>
<div id="main-container" class="container-fluid">
<div class="row">
<div class="jumbotron col-lg-8 col-md-12">
</div>
<div class="jumbotron col-lg-4 col-md-12">
<nav class="navbar navbar-light bg-light">
<div class="navbar-header">
<a href="#" class="navbar-brand">Brand</a>
</div>
<div id="navbarCollapse">
<ul class="nav navbar-nav">
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Messages <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Inbox</a></li>
<li><a href="#">Drafts</a></li>
<li><a href="#">Sent Items</a></li>
<li class="divider"></li>
<li><a href="#">Trash</a></li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
<footer class="footer navbar-fixed-bottom">
<div class="container">
<span class="text-muted">Place sticky footer content here.</span>
</div>
</footer>
</div>
</div>
</body>
</html>
那么我哪里失踪了？这将是很大的帮助。
编辑
解决下拉点击问题后，我遇到了导航栏 CSS 的问题。当我展开 dropdwon 时，它不会弹出导航栏区域，而是会增加导航栏的高度并在其中显示整个列表。
这里是编辑后的index.html.erb文件。随着建议的编辑，我已经完全删除了 CSS 引用，但它仍然给 CSS 带来了同样的问题。
<div id="main-container" class="container-fluid">
<div class="row">
<div class="jumbotron col-lg-8 col-md-12">
</div>
<div class="jumbotron col-lg-4 col-md-12">
<nav class="navbar navbar-light bg-light">
<div class="navbar-header">
<a href="#" class="navbar-brand">Brand</a>
</div>
<div id="navbarCollapse">
<ul class="nav navbar-nav">
<li class="dropdown show">
<a data-toggle="dropdown" class="dropdown-toggle" href="#" id="CategoryDD" aria-haspopup="true" aria-expanded="false">Messages <b class="caret"></b></a>
<ul class="dropdown-menu" aria-labelledby="CategoryDD">
<li><a href="#">Inbox</a></li>
<li><a href="#">Drafts</a></li>
<li><a href="#">Sent Items</a></li>
<li class="divider"></li>
<li><a href="#">Trash</a></li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
<footer class="footer navbar-fixed-bottom">
<div class="container">
<span class="text-muted">Place sticky footer content here.</span>
</div>
</footer>
</div>
</div>
最佳答案
添加到application.js
//= require jquery-ui
紧接着
//= require jquery
对我来说就像一个魅力。 希望这也能解决某人的问题。
关于ruby-on-rails - Bootstrap Dropdown 在 Ruby on Rails 中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46138947/