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

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

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

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

Twitter Bootstrap

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

メニュー

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

Bootstrap

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

HTML

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

Q&A

解決済

1回答

2038閲覧

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

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で作成されています。

0グッド

0クリップ

投稿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を使ってエラーがないか確認しましたが、この部分にエラーはありませんでした。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問