0
私はレール開発を初めてお使いです。私は1つのRailsアプリケーションを作成しています。 Bootstrap 4.0.0ベータ版を使用しています。私は特定のdivに1つのnavbarを持っています（ページ全体ではありません）。しかし、問題は、クリックするとドロップダウンが機能しないということです。最初はnav-brandをクリックしてからドロップダウンをクリックすれば動作します。しかし、それはnavbarの全体の配置を変更します。もう一度nav-brandをクリックすると、ドロップダウンが機能しなくなります。Ruby on Railsでブートストラップドロップダウンが動作しない
全ページにも載せてみましたが同じ問題があります。
私が持っているルビー-2.4.1、レール-5.1.3、ブートストラップ・4.0.0betaここ
私/assets/stylesheets/application.cssコード
*= require bootstrap
であり、これは/
//= require jquery
//= require jquery_ujs
//= require popper
//= require turbolinks
//= require bootstrap-sprockets
//= require bootstrap
//= require_tree .
*= 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
そして、これは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>
だから私は行方不明ですか？それは大きな助けになるでしょう。
EDIT
ドロップダウンクリックの問題を解決した後、私は、ナビゲーションバーのCSSの問題を取得しています。私がドロップダウンを展開すると、ナビゲーバー領域からポップアウトするのではなく、ナビゲーバーの高さを上げ、その全体リストを表示します。
ここは編集済みの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>
コンソールにエラーはありますか？ – Hemal
番号。それはクリックされていませんでした。 （nav-brandをクリックしないで） – Sheshang