Bootstrapのドロップダウンが機能しない

Bootstrapのドロップダウンを適用したい

ヘッダーメニューにドロップダウンリスト(プルダウン)の機能を追加したく、BootstrapのDropdownsの機能を使うことにした。

getbootstrap.jp

実装の手順は、

  • gem bootstrapをインストールし、READMEに記載された手順通り、cssJavaScriptが使えるよう各ファイルに記述
  • ヘッダーメニューにBootstrapを適用させるため、Bootstrapの公式サイト通り、属性を編集。

github.com

問題

ヘッダーメニューのドロップダウンが機能していない。

仮説

他の部分のデザインが変わったことからBootstrapは導入されている。

もう一度、DropdownsのサイトをみるとJavaScriptを使ってドロップダウン機能を実現しているみたいだった。したがって、自分の実装ではBootstrapの指定しているJavaScriptが使えていないのかと考えた。しかしgem bootstrapのREADMEの記載通りコードを書いているのでできているはず。

解決法

HTMLの属性の設定をBootstrapのver4系でしていたのに、Gemfile.lockをみると5.1.0というバージョンのgemでインストールされてしまっていた。
原因は、Gemfileでバージョン指定せず、gem名だけを記述していたことだとわかり、バージョンを4系になるよう明記してインストール。無事にドロップダウンが適用された。

学んだこと

  • バージョンの大切さ。あるバージョンで設定するなら、インストールするときに明記するようにする(Gemfileに)。