Twitter Bootstrap を twitter-bootstrap-rails を使わず、app/assets に放り込む形で導入したんだけど、レスポンシブ・デザインにしようと思って bootstrap-responsive.css を追加しても、スタイルがちゃんと適用されない…。
表示された HTML を Chrome のデベロッパーツールで見たところ、bootstrap.css が bootstrap-responsive.css の後に読み込まれていた。スタイルが上書きされてしまっていたのか。
Asset Pipeline は何も指定しなければファイル名の昇順で読み込むから、bootstrap.css がちゃんと先に読み込まれるように対策をしなければいけないな。ファイル名を変更する、というのはスマートじゃないから、application.css を次のように編集した。
/* * This is a manifest file that'll be compiled into application.css, which will include all the files * listed below. * * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets, * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path. * * You're free to add application-wide styles to this file and they'll appear at the top of the * compiled file, but it's generally better to create a new file per style scope. * *= require bootstrap *= require_self *= require bootstrap-responsive *= require_tree . */ body { padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */ }
読み込みたいファイルの順番を、 require を使って明示的に指定。これでちゃんとレスポンシブ・デザインが適用されるようになった。