Rails5でBootstrap4のドロップダウンメニューが表示されない
解決済
回答 1
投稿
- 評価
- クリップ 0
- VIEW 1,386
Ruby on Rails 5で練習がてら、Webサービスを作っています。
BootStrap4を使い、ドロップダウンメニューを実装しようとしているのですが、クリックしてもドロップダウンメニューが表示されなくて、ハマっています。
Rails Tutorialにあるようにヘッダーの一番右側(Accounts)をクリックすると下にProfile, Settings, Log outが表示されるようにしたいです。
application.jsをいじったりしましたが、全く動作しないので、お力を借りたく質問しました。
custom.cssを見てわかる通り、CSSが未熟です。(Rails Tutorialのほぼコピー)
現在書いているコードは以下です。
必要なところがあれば、書いていただければすぐ載せます。
よろしくお願いいたします。
↓ _header.html.erb
<header class="navbar navbar-fixed-top navbar-inverse">
<div class="container">
<div class="header-logo">
<%= link_to "Recobuy", root_path, id: "logo" %>
</div>
<nav>
<ul class="header-menus">
<li><%= link_to "Home", "/home" %></li>
<li><%= link_to "Help", help_path %></li>
<% if logged_in? %>
<li><%= link_to "Users", "#" %></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Account <b class="caret"></b>
</a>
</li>
<ul class="dropdown-menu">
<li><%= link_to "Profile", current_user %></li>
<li><%= link_to "Settings", '#' %></li>
<li class="divider"></li>
<li>
<%= link_to "Log out", logout_path, method: :delete %>
</li>
</ul>
</li>
<% else %>
<li><%= link_to "Log in", login_path %></li>
<% end %>
</ul>
</nav>
</div>
</header>
↓ custom.css
@import "bootstrap";
/* universal */
@mixin box_sizing {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
padding-top: 60px;
font-family: "Hiragino Kaku Gothic ProN";
}
a {
text-decoration: none;
}
li{
liststyle: none;
}
.container{
width: 1170px;
padding: 0 15px;
margin: 0 auto;
}
.top-wrapper {
padding: 180px 0 100px 0;
text-align: center;
}
section{
overflow: auto;
}
textarea{
resize: vertical;
}
.center{
text-align: center;
}
.center h1{
margin-bottom: 10px
}
/* typography */
h1, h2, h3, h4, h5, h6 {
line-height: 1;
}
h1 {
font-size: 3em;
letter-spacing: -2px;
margin-bottom: 30px;
text-align: center;
}
h2 {
font-size: 1.2em;
letter-spacing: -1px;
margin-bottom: 30px;
text-align: center;
font-weight: normal;
color: #777;
}
p {
font-size: 1.1em;
line-height: 1.7em;
}
/* header */
/*#logo {
float: left;
margin-right: 10px;
font-size: 1.7em;
color: #fff;
text-transform: uppercase;
letter-spacing: -1px;
padding-top: 9px;
font-weight: bold;
}
#logo:hover {
color: #fff;
text-decoration: none;
}*/
/* footer */
header {
height: 65px;
width: 100%;
background-color: rgba(34, 49, 52, 0.9);
position: fixed;
top: 0;
left: 0;
z-index: 1;
}
.header-logo {
float: left;
color: white;
font-size: 22px;
line-height: 64px;
}
.header-logo a{
color: white;
font-size: 22px;
}
.header-menus {
font-weight: 400;
float: right;
padding-right: 20px;
list-style-position: outside;
list-style-type: none;
text-align: left;
}
.header-menus li {
float: left;
line-height: 64px;
font-size: 13px;
color: white;
padding-left: 15px;
}
.header-menus a {
float: left;
font-size: 13px;
color: white;
}
/* footer */
footer {
margin-top: 45px;
padding-top: 5px;
border-top: 1px solid #eaeaea;
color: #777;
}
footer a {
color: #555;
}
footer a:hover {
color: #222;
}
footer small {
float: left;
}
footer ul {
float: right;
list-style: none;
}
footer ul li {
float: left;
margin-left: 15px;
}
/* miscellaneous */
.debug_dump {
clear: both;
float: left;
width: 100%;
margin-top: 45px;
@include box_sizing;
}
/* sidebar */
aside{
section.user_info{
margin-top: 20px;
}
section {
padding: 10px 0;
margin-top: 20px;
&:first-child {
border: 0;
padding-top: 0;
}
span {
display: block;
margin-bottom: 3px;
line-height: 1;
}
h1 {
font-size: 1.4em;
text-align: left;
letter-spacing: -1px;
margin-bottom: 3px;
margin-top: 0px;
}
}
}
.gravatar {
float: left;
margin-right: 10px;
}
.gravatar_edit{
margin-top: 15px;
}
/* forms */
input, textarea, select, .uneditable-input{
border: 1px solid #bbb;
width: 100%;
margin-bottom: 15px;
@include box_sizing;
}
input {
height: auto !important;
}
#error_explanation{
color: red;
ul{
color: red;
margin: 0 0 30px 0;
}
}
.field_with_errors {
@extend .is-invalid;
.form-control {
color: cornflowerblue;
}
}
.row{
text-align: center;
}
.col-md-6 {
display: inline-block;
text-align: left;
}
aside {
textarea {
height: 100px;
margin-bottom: 5px;
}
}
/* forms */
input, textarea, select, .uneditable-input {
border: 1px solid #bbb;
width: 100%;
margin-bottom: 15px;
@include box_sizing;
}
input {
height: auto !important;
}
#error_explanation {
color: red;
ul {
color: red;
margin: 0 0 30px 0;
}
}
.checkbox {
margin-top: -10px;
margin-botoom: 10px;
span {
margin-left: 20px;
font-weight: normal;
}
}
#session_remeber_me{
width: auto;
margin-left: 0;
}
↓ application.js
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, or any plugin's
// vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file. JavaScript code in this file should be added after the last require_* statement.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery3
//= require popper
//= require bootstrap
//= require activestorage
//= require turbolinks
//= require_tree
//= require bootstrap-sprockets
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
checkベストアンサー
+1
li.dropdown
の中にul要素
を入れることで、質問文の問題は解決すると思います。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<title>タイトル</title>
<style>
/* universal */
body {
padding-top: 60px;
font-family: "Hiragino Kaku Gothic ProN";
}
a {
text-decoration: none;
}
li {
liststyle: none;
}
.container {
width: 1170px;
padding: 0 15px;
margin: 0 auto;
}
.top-wrapper {
padding: 180px 0 100px 0;
text-align: center;
}
section {
overflow: auto;
}
textarea {
resize: vertical;
}
.center {
text-align: center;
}
.center h1 {
margin-bottom: 10px;
}
/* typography */
h1, h2, h3, h4, h5, h6 {
line-height: 1;
}
h1 {
font-size: 3em;
letter-spacing: -2px;
margin-bottom: 30px;
text-align: center;
}
h2 {
font-size: 1.2em;
letter-spacing: -1px;
margin-bottom: 30px;
text-align: center;
font-weight: normal;
color: #777;
}
p {
font-size: 1.1em;
line-height: 1.7em;
}
header {
height: 65px;
width: 100%;
background-color: rgba(34, 49, 52, 0.9);
position: fixed;
top: 0;
left: 0;
z-index: 1;
}
.header-logo {
float: left;
color: white;
font-size: 22px;
line-height: 64px;
}
.header-logo a {
color: white;
font-size: 22px;
}
.header-menus {
font-weight: 400;
float: right;
padding-right: 20px;
list-style-position: outside;
list-style-type: none;
text-align: left;
}
.header-menus li {
float: left;
line-height: 64px;
font-size: 13px;
color: white;
padding-left: 15px;
}
.header-menus a {
float: left;
font-size: 13px;
color: white;
}
/* footer */
footer {
margin-top: 45px;
padding-top: 5px;
border-top: 1px solid #eaeaea;
color: #777;
}
footer a {
color: #555;
}
footer a:hover {
color: #222;
}
footer small {
float: left;
}
footer ul {
float: right;
list-style: none;
}
footer ul li {
float: left;
margin-left: 15px;
}
/* miscellaneous */
.debug_dump {
clear: both;
float: left;
width: 100%;
margin-top: 45px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* sidebar */
aside section.user_info {
margin-top: 20px;
}
aside section {
padding: 10px 0;
margin-top: 20px;
}
aside section:first-child {
border: 0;
padding-top: 0;
}
aside section span {
display: block;
margin-bottom: 3px;
line-height: 1;
}
aside section h1 {
font-size: 1.4em;
text-align: left;
letter-spacing: -1px;
margin-bottom: 3px;
margin-top: 0px;
}
.gravatar {
float: left;
margin-right: 10px;
}
.gravatar_edit {
margin-top: 15px;
}
/* forms */
input, textarea, select, .uneditable-input {
border: 1px solid #bbb;
width: 100%;
margin-bottom: 15px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
input {
height: auto !important;
}
#error_explanation {
color: red;
}
#error_explanation ul {
color: red;
margin: 0 0 30px 0;
}
.row {
text-align: center;
}
.col-md-6 {
display: inline-block;
text-align: left;
}
aside textarea {
height: 100px;
margin-bottom: 5px;
}
/* forms */
input, textarea, select, .uneditable-input {
border: 1px solid #bbb;
width: 100%;
margin-bottom: 15px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
input {
height: auto !important;
}
#error_explanation {
color: red;
}
#error_explanation ul {
color: red;
margin: 0 0 30px 0;
}
.checkbox {
margin-top: -10px;
margin-botoom: 10px;
}
.checkbox span {
margin-left: 20px;
font-weight: normal;
}
#session_remeber_me {
width: auto;
margin-left: 0;
}
</style>
</head>
<body>
<header class="navbar navbar-fixed-top navbar-inverse">
<div class="container">
<div class="header-logo">
<a href="#" id="logo">Recobuy</a>
</div>
<nav>
<ul class="header-menus">
<li><a href="#">Home</a></li>
<li><a href="#">Help</a></li>
<li><a href="#">Users</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Account <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">Profile</a></li>
<li><a href="#">Settings</a></li>
<li class="divider"></li>
<li><a href="#">Log out</a></li>
</ul>
</li>
</ul>
</nav>
</div>
</header>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</body>
</html>
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう!
- ただいまの回答率 89.98%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる