Bootstrapのドロップダウンが機能しない
Bootstrapのドロップダウンを適用したい
ヘッダーメニューにドロップダウンリスト(プルダウン)の機能を追加したく、BootstrapのDropdownsの機能を使うことにした。
実装の手順は、
- gem bootstrapをインストールし、READMEに記載された手順通り、cssやJavaScriptが使えるよう各ファイルに記述
- ヘッダーメニューにBootstrapを適用させるため、Bootstrapの公式サイト通り、属性を編集。
問題
ヘッダーメニューのドロップダウンが機能していない。
仮説
他の部分のデザインが変わったことからBootstrapは導入されている。
もう一度、DropdownsのサイトをみるとJavaScriptを使ってドロップダウン機能を実現しているみたいだった。したがって、自分の実装ではBootstrapの指定しているJavaScriptが使えていないのかと考えた。しかしgem bootstrapのREADMEの記載通りコードを書いているのでできているはず。
解決法
HTMLの属性の設定をBootstrapのver4系でしていたのに、Gemfile.lockをみると5.1.0というバージョンのgemでインストールされてしまっていた。
原因は、Gemfileでバージョン指定せず、gem名だけを記述していたことだとわかり、バージョンを4系になるよう明記してインストール。無事にドロップダウンが適用された。
学んだこと
- バージョンの大切さ。あるバージョンで設定するなら、インストールするときに明記するようにする(Gemfileに)。