Ruby on Rails:Rails5でtwitter-bootstrap-railsで導入したBootstrapをちゃんと使えるようにする

自分の作っているサービスで、ずっとbootstrapが上手く反映されてくれずハマっていたけど、解消できたのでメモφ(..)

github.com

前提

事象

発生していた事象は下記の通りです。

• ナビバーのドロップダウンリストが開かない
• スマホでアクセスしてもナビバーがハンバーガーメニューにならない

環境

私のサービスの環境情報を下記に記載しておきます。

gem	version
rails	5.1.2
twitter-bootstrap-rails	4.0.0

手順

jQueryを導入する

Bootstrap3はjQueryに依存していますが、Rails5からjQueryが依存から除外されたので、明示的にGemfileに記述する必要があります。
下記をGemfileに追記し、bundle installを実行します。

gem 'jquery-rails'

application.jsの修正

jQueryの導入が出来たらapplication.jsに追記し、Asset管理対象に追加します。
※twitter/bootstrapが記載されていない場合は、合わせて追記します。

//= require jquery
//= require twitter/bootstrap

この時点で、ナビバーのドロップダウンリストが開かないは解消するはずです！

viewportの設定

application.html.erbに下記を追記します。

<meta name="viewport" content="width=device-width, initial-scale=1">

これで、スマホでアクセスしてもナビバーがハンバーガーメニューにならないが解消されるはずです！

※viewportについては下記が参考になると思います。

qiita.com

おわりに

Rails5では、jQueryの依存がなくなってフロントエンド界隈が盛り上がっていますが、Rails4以前でBootstrapを使っているサービスは数多くあると思うので、Railsのバージョンアップの際に参考になればと思いますφ(..)
大きなバージョンアップの際には依存するライブラリへの影響も気をつける必要がありますね・・・！

参考

www.bountysource.com