[Ruby on Rails]bootstrap公式サイトのサンプルテンプレートを持ってくるときの注意点

Ruby on Railsにbootstrapを入れてサンプルページからテンプレートを持ってきたけど少しずれる。なぜ…?

Ruby on Railsにbootstrapの公式サイトのテンプレートを入れるとずれる

以下の画像のようにHello, world!の部分が少し上にいってしまっていた。

参考にしたサイトはこちら。↓

https://getbootstrap.com/docs/4.1/examples/jumbotron/

bootstrapの設定手順は以下のページ。

Ruby on Railsでbootstrapを使おう!Ruby on Railsでbootstrapを使おう!

サンプルとデザインが変わる原因は?

bootstrapもしっかりあたっている。

けど、なぜtopが0まで上がってしまうのか…?

原因はbodyのCSS!

公式のサンプルページではbodyにpadding-top: 3.5remがあたっている。

自分の環境には上記のCSSがない!

 

これは自分で設定しないといけないよう。

application.scssなり適切な場所に設定が必要。

body{
padding-top: 3.5rem
}

これで解決!

 

もし、持ってきたテンプレートがずれる場合は

  • 該当周辺箇所
  • 閉じタグなどが抜けてないか
  • 問題なければ更に大枠

を見ていくのが良さそう。

 

何か参考になれば幸いです。