Rails5でBootstrap4のドロップダウンメニューが表示されない

Ruby on Rails 5で練習がてら、Webサービスを作っています。
BootStrap4を使い、ドロップダウンメニューを実装しようとしているのですが、クリックしてもドロップダウンメニューが表示されなくて、ハマっています。

Rails Tutorialにあるようにヘッダーの一番右側(Accounts)をクリックすると下にProfile, Settings, Log outが表示されるようにしたいです。

application.jsをいじったりしましたが、全く動作しないので、お力を借りたく質問しました。

custom.cssを見てわかる通り、CSSが未熟です。(Rails Tutorialのほぼコピー)

現在書いているコードは以下です。
必要なところがあれば、書いていただければすぐ載せます。

よろしくお願いいたします。

↓ _header.html.erb

Ruby
1<header class="navbar navbar-fixed-top navbar-inverse">
2  <div class="container">
3    <div class="header-logo">
4      <%= link_to "Recobuy", root_path, id: "logo" %>
5    </div>
6    <nav>
7      <ul class="header-menus">
8        <li><%= link_to "Home", "/home" %></li>
9        <li><%= link_to "Help", help_path %></li>
10        <% if logged_in? %>
11          <li><%= link_to "Users", "#"  %></li>
12          <li class="dropdown">
13            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
14              Account <b class="caret"></b>
15            </a>
16          </li>
17          <ul class="dropdown-menu">
18            <li><%= link_to "Profile", current_user %></li>
19            <li><%= link_to "Settings", '#' %></li>
20            <li class="divider"></li>
21            <li>
22              <%= link_to "Log out", logout_path, method: :delete %>
23            </li>
24          </ul>
25          </li>
26        <% else %>
27          <li><%= link_to "Log in", login_path %></li>
28        <% end %>
29      </ul>
30    </nav>
31  </div>
32</header>

↓　custom.css

css
1@import "bootstrap";
2
3/* universal */
4
5@mixin box_sizing {
6  -moz-box-sizing:    border-box;
7  -webkit-box-sizing: border-box;
8  box-sizing:         border-box;
9}
10
11
12body {
13  padding-top: 60px;
14  font-family: "Hiragino Kaku Gothic ProN";
15}
16
17a {
18  text-decoration: none;
19}
20
21li{
22  liststyle: none;
23}
24
25.container{
26  width: 1170px;
27  padding: 0 15px;
28  margin: 0 auto;
29}
30
31.top-wrapper {
32  padding: 180px 0 100px 0;
33  text-align: center;
34}
35
36
37section{
38  overflow: auto;
39}
40
41textarea{
42  resize: vertical;
43}
44
45.center{
46  text-align: center;
47}
48
49.center h1{
50  margin-bottom: 10px
51}
52
53/* typography */
54
55h1, h2, h3, h4, h5, h6 {
56  line-height: 1;
57}
58
59h1 {
60  font-size: 3em;
61  letter-spacing: -2px;
62  margin-bottom: 30px;
63  text-align: center;
64}
65
66h2 {
67  font-size: 1.2em;
68  letter-spacing: -1px;
69  margin-bottom: 30px;
70  text-align: center;
71  font-weight: normal;
72  color: #777;
73}
74
75p {
76  font-size: 1.1em;
77  line-height: 1.7em;
78}
79
80
81/* header */
82
83/*#logo {
84  float: left;
85  margin-right: 10px;
86  font-size: 1.7em;
87  color: #fff;
88  text-transform: uppercase;
89  letter-spacing: -1px;
90  padding-top: 9px;
91  font-weight: bold;
92}
93
94#logo:hover {
95  color: #fff;
96  text-decoration: none;
97}*/
98
99/* footer */
100
101
102header {
103  height: 65px;
104  width: 100%;
105  background-color: rgba(34, 49, 52, 0.9);
106  position: fixed;
107  top: 0;
108  left: 0;
109  z-index: 1;
110}
111
112
113.header-logo {
114  float: left;
115  color: white;
116  font-size: 22px;
117  line-height: 64px;
118}
119
120.header-logo a{
121  color: white;
122  font-size: 22px;
123}
124
125
126.header-menus {
127  font-weight: 400;
128  float: right;
129  padding-right: 20px;
130  list-style-position: outside;
131  list-style-type: none;
132  text-align: left;
133}
134
135.header-menus li {
136  float: left;
137  line-height: 64px;
138  font-size: 13px;
139  color: white;
140  padding-left: 15px;
141}
142
143.header-menus a {
144  float: left;
145  font-size: 13px;
146  color: white;
147}
148
149
150
151
152/* footer */
153
154
155footer {
156  margin-top: 45px;
157  padding-top: 5px;
158  border-top: 1px solid #eaeaea;
159  color: #777;
160}
161
162footer a {
163  color: #555;
164}
165
166footer a:hover {
167  color: #222;
168}
169
170footer small {
171  float: left;
172}
173
174footer ul {
175  float: right;
176  list-style: none;
177}
178
179footer ul li {
180  float: left;
181  margin-left: 15px;
182}
183
184/* miscellaneous */
185
186.debug_dump {
187  clear: both;
188  float: left;
189  width: 100%;
190  margin-top: 45px;
191  @include box_sizing;
192}
193
194/* sidebar */
195
196aside{
197  section.user_info{
198    margin-top: 20px;
199  }
200  section {
201    padding: 10px 0;
202    margin-top: 20px;
203    &:first-child {
204      border: 0;
205      padding-top: 0;
206    }
207    span {
208      display: block;
209      margin-bottom: 3px;
210      line-height: 1;
211    }
212    h1 {
213      font-size: 1.4em;
214      text-align: left;
215      letter-spacing: -1px;
216      margin-bottom: 3px;
217      margin-top: 0px;
218    }
219  }
220}
221
222.gravatar {
223  float: left;
224  margin-right: 10px;
225}
226
227.gravatar_edit{
228  margin-top: 15px;
229}
230
231
232/* forms */
233
234input, textarea, select, .uneditable-input{
235  border: 1px solid #bbb;
236  width: 100%;
237  margin-bottom: 15px;
238  @include box_sizing;
239}
240
241input {
242  height: auto !important;
243}
244
245
246#error_explanation{
247  color: red;
248  ul{
249    color: red;
250    margin: 0 0 30px 0;
251  }
252}
253
254.field_with_errors {
255  @extend .is-invalid;
256  .form-control {
257    color: cornflowerblue;
258  }
259}
260
261
262.row{
263  text-align: center;
264}
265
266.col-md-6 {
267  display: inline-block;
268  text-align: left;
269}
270
271
272
273aside {
274  textarea {
275    height: 100px;
276    margin-bottom: 5px;
277  }
278}
279
280/* forms */
281input, textarea, select, .uneditable-input {
282  border: 1px solid #bbb;
283  width: 100%;
284  margin-bottom: 15px;
285  @include box_sizing;
286}
287
288input {
289  height: auto !important;
290}
291
292#error_explanation {
293  color: red;
294  ul {
295    color: red;
296    margin: 0 0 30px 0;
297  }
298}
299
300
301
302
303.checkbox {
304  margin-top: -10px;
305  margin-botoom: 10px;
306  span {
307    margin-left: 20px;
308    font-weight: normal;
309  }
310}
311
312#session_remeber_me{
313  width: auto;
314  margin-left: 0;
315}
316
317

↓　application.js

application.js
1// This is a manifest file that'll be compiled into application.js, which will include all the files
2// listed below.
3//
4// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, or any plugin's
5// vendor/assets/javascripts directory can be referenced here using a relative path.
6//
7// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
8// compiled file. JavaScript code in this file should be added after the last require_* statement.
9//
10// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
11// about supported directives.
12//
13
14//= require jquery3
15//= require popper
16//= require bootstrap
17//= require activestorage
18//= require turbolinks
19//= require_tree
20//= require bootstrap-sprockets

行動規範の内容に同意します

回答1件

ベストアンサー

li.dropdownの中にul要素を入れることで、質問文の問題は解決すると思います。

HTML
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <meta http-equiv="X-UA-Compatible" content="ie=edge">
7    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
8    <title>タイトル</title>
9    <style>
10        /* universal */
11        body {
12            padding-top: 60px;
13            font-family: "Hiragino Kaku Gothic ProN";
14        }
15
16        a {
17            text-decoration: none;
18        }
19
20        li {
21            liststyle: none;
22        }
23
24        .container {
25            width: 1170px;
26            padding: 0 15px;
27            margin: 0 auto;
28        }
29
30        .top-wrapper {
31            padding: 180px 0 100px 0;
32            text-align: center;
33        }
34
35        section {
36            overflow: auto;
37        }
38
39        textarea {
40            resize: vertical;
41        }
42
43        .center {
44            text-align: center;
45        }
46
47        .center h1 {
48            margin-bottom: 10px;
49        }
50
51        /* typography */
52        h1, h2, h3, h4, h5, h6 {
53            line-height: 1;
54        }
55
56        h1 {
57            font-size: 3em;
58            letter-spacing: -2px;
59            margin-bottom: 30px;
60            text-align: center;
61        }
62
63        h2 {
64            font-size: 1.2em;
65            letter-spacing: -1px;
66            margin-bottom: 30px;
67            text-align: center;
68            font-weight: normal;
69            color: #777;
70        }
71
72        p {
73            font-size: 1.1em;
74            line-height: 1.7em;
75        }
76
77        header {
78            height: 65px;
79            width: 100%;
80            background-color: rgba(34, 49, 52, 0.9);
81            position: fixed;
82            top: 0;
83            left: 0;
84            z-index: 1;
85        }
86
87        .header-logo {
88            float: left;
89            color: white;
90            font-size: 22px;
91            line-height: 64px;
92        }
93
94        .header-logo a {
95            color: white;
96            font-size: 22px;
97        }
98
99        .header-menus {
100            font-weight: 400;
101            float: right;
102            padding-right: 20px;
103            list-style-position: outside;
104            list-style-type: none;
105            text-align: left;
106        }
107
108        .header-menus li {
109            float: left;
110            line-height: 64px;
111            font-size: 13px;
112            color: white;
113            padding-left: 15px;
114        }
115
116        .header-menus a {
117            float: left;
118            font-size: 13px;
119            color: white;
120        }
121
122        /* footer */
123        footer {
124            margin-top: 45px;
125            padding-top: 5px;
126            border-top: 1px solid #eaeaea;
127            color: #777;
128        }
129
130        footer a {
131            color: #555;
132        }
133
134        footer a:hover {
135            color: #222;
136        }
137
138        footer small {
139            float: left;
140        }
141
142        footer ul {
143            float: right;
144            list-style: none;
145        }
146
147        footer ul li {
148            float: left;
149            margin-left: 15px;
150        }
151
152        /* miscellaneous */
153        .debug_dump {
154            clear: both;
155            float: left;
156            width: 100%;
157            margin-top: 45px;
158            -moz-box-sizing: border-box;
159            -webkit-box-sizing: border-box;
160            box-sizing: border-box;
161        }
162
163        /* sidebar */
164        aside section.user_info {
165            margin-top: 20px;
166        }
167
168        aside section {
169            padding: 10px 0;
170            margin-top: 20px;
171        }
172
173        aside section:first-child {
174            border: 0;
175            padding-top: 0;
176        }
177
178        aside section span {
179            display: block;
180            margin-bottom: 3px;
181            line-height: 1;
182        }
183
184        aside section h1 {
185            font-size: 1.4em;
186            text-align: left;
187            letter-spacing: -1px;
188            margin-bottom: 3px;
189            margin-top: 0px;
190        }
191
192        .gravatar {
193            float: left;
194            margin-right: 10px;
195        }
196
197        .gravatar_edit {
198            margin-top: 15px;
199        }
200
201        /* forms */
202        input, textarea, select, .uneditable-input {
203            border: 1px solid #bbb;
204            width: 100%;
205            margin-bottom: 15px;
206            -moz-box-sizing: border-box;
207            -webkit-box-sizing: border-box;
208            box-sizing: border-box;
209        }
210
211        input {
212            height: auto !important;
213        }
214
215        #error_explanation {
216            color: red;
217        }
218
219        #error_explanation ul {
220            color: red;
221            margin: 0 0 30px 0;
222        }
223
224        .row {
225            text-align: center;
226        }
227
228        .col-md-6 {
229            display: inline-block;
230            text-align: left;
231        }
232
233        aside textarea {
234            height: 100px;
235            margin-bottom: 5px;
236        }
237
238        /* forms */
239        input, textarea, select, .uneditable-input {
240            border: 1px solid #bbb;
241            width: 100%;
242            margin-bottom: 15px;
243            -moz-box-sizing: border-box;
244            -webkit-box-sizing: border-box;
245            box-sizing: border-box;
246        }
247
248        input {
249            height: auto !important;
250        }
251
252        #error_explanation {
253            color: red;
254        }
255
256        #error_explanation ul {
257            color: red;
258            margin: 0 0 30px 0;
259        }
260
261        .checkbox {
262            margin-top: -10px;
263            margin-botoom: 10px;
264        }
265
266        .checkbox span {
267            margin-left: 20px;
268            font-weight: normal;
269        }
270
271        #session_remeber_me {
272            width: auto;
273            margin-left: 0;
274        }
275    </style>
276</head>
277<body>
278<header class="navbar navbar-fixed-top navbar-inverse">
279    <div class="container">
280        <div class="header-logo">
281            <a href="#" id="logo">Recobuy</a>
282        </div>
283        <nav>
284            <ul class="header-menus">
285                <li><a href="#">Home</a></li>
286                <li><a href="#">Help</a></li>
287                <li><a href="#">Users</a></li>
288                <li class="dropdown">
289                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
290                        Account <b class="caret"></b>
291                    </a>
292                    <ul class="dropdown-menu">
293                        <li><a href="#">Profile</a></li>
294                        <li><a href="#">Settings</a></li>
295                        <li class="divider"></li>
296                        <li><a href="#">Log out</a></li>
297                    </ul>
298                </li>
299            </ul>
300        </nav>
301    </div>
302</header>
303<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
304<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
305<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
306</body>
307</html>