質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

質問する

ただいまの
回答率

89.98%

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

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 1,386
ul_

ul_

score 13

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

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

Accountをクリックしてもドロップダウンメニューが表示されない

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ページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1 件

link

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%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる
質問する

関連した質問

同じタグがついた質問を見る

SNSアカウントでログイン

teratailアカウントでログイン

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る