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

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

新規登録して質問してみよう
ただいま回答率
86.12%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Twitter Bootstrap

Twitter Bootstrapはウェブアプリとウェブサイトの開発をすぐに始めることができるツイッターのフロントエンドのフレームワークです。

メニュー

メニューは、UIにおける仕組みであり、ユーザに機能の表示と実行する手段を与えます。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

解決済

Bootstrapを使ったハンバーガーメニューのボタンが反応しない

frfr
frfr

総合スコア1

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Twitter Bootstrap

Twitter Bootstrapはウェブアプリとウェブサイトの開発をすぐに始めることができるツイッターのフロントエンドのフレームワークです。

メニュー

メニューは、UIにおける仕組みであり、ユーザに機能の表示と実行する手段を与えます。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

1回答

0グッド

0クリップ

1064閲覧

投稿2020/06/04 14:27

前提・実現したいこと

Bootstrap4.3.1でヘッダー部分にナビゲーションバーを作っています。
そのバーの右端にハンバーガーメニューのボタンをクリックするとメニューが表示されるようにしたいです。(liの部分)

発生している問題・エラーメッセージ

Bootstrap4.3.1でナビゲーションバーの右端にハンバーガーメニューのボタンを作成したのですが、クリックしても中のリストが表示されません。(クリックしても何も反応しません)

該当のソースコード

HTML

1<nav class="navbar navbar-light bg-light"> 2 <a href="#" class="navbar-brand">Bon Voyage</a> 3 4 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-bar"> 5 <span class="navbar-toggler-icon"><i class="fas fa-plane-departure" style="color: black;"></i></span> 6 </button> 7 <div class="collapse nabvar-collapse" id="nav-bar"> 8 <ul class="navbar-nav"> 9 <li class="nav-item active"> 10 <a href="togo-list.html" target="_blank" class="nav-link">Togo</a> 11 </li> 12 </ul> 13 </div> 14 </nav>

試したこと

公式ドキュメントを読んでクラス名が間違ってないかなどを確認しましたが、やはり表示されません。
Nu Html Checkerを使ってエラーがないか確認しましたが、この部分にエラーはありませんでした。

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答1

1

ベストアンサー

BootstrapのCDNを正しく読み込んでいますか??
BootstrapはjQueryを使用していますから、</body>の直前に下のコードを追加してみて下さい。

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

投稿2020/06/04 18:55

退会済みユーザー

退会済みユーザー

総合スコア0

kei344👍を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

frfr

2020/06/05 01:38

<firebaseのscriptやAPIkey> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js></script> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="main.js"></script> <google places APIのscript> ご回答ありがとうございます。 記入し忘れていて申し訳ないのですが、今回Bootstrapとjqueryのほかに自作のjsとVue.jsとgoogle places APIとfirebaseを使用しています。 読み込みの順番上bodyの直前にgoogle places APIを書いていますが、その前に上記のような具合で追加してみたのですが、bootstrapが反映されていません。 読み込んでいるものが多いので,ほかのAPIなどとの順番が間違っているのかもしれません…
frfr

2020/06/05 01:49

読み込みの順番を試行錯誤してみた結果ボタンが反応するようになりました! 読み込みの順番に問題があるということに気づいておりませんでしたので、とても助かりました。 有難うございました。

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.12%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Twitter Bootstrap

Twitter Bootstrapはウェブアプリとウェブサイトの開発をすぐに始めることができるツイッターのフロントエンドのフレームワークです。

メニュー

メニューは、UIにおける仕組みであり、ユーザに機能の表示と実行する手段を与えます。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。