cssの設定が反映しない

Question

ruby on rails チュートリアルを以下に従って試しています。

https://railstutorial.jp/chapters/filling_in_the_layout?version=5.1#cha-filling_in_the_layout

railsのバージョンは5.2なのですが、5.1のチュートリアルしかないので上記を参考にしています。
チュートリアルでは、sample appは太字が大文字で太字になっていたり、Home、Help、Aboud各リンクが横になり文字色も違っていたりと、チュートリアルとちがう結果になります。

cssの記述内容が反映していたり、していなかったりするように見えますが、何が原因でしょうか？

[application.html.erb]

：
    <header class="navbar navbar-fixed-top navbar-dark bg-dark">
      <div class="container">
        <%= link_to "sample app", '#', id: "logo" %>
       <nav>
          <ul class="nav navbar-nav navbar-right">
            <li><%= link_to "Home",   '#' %></li>
            <li><%= link_to "Help",   '#' %></li>
            <li><%= link_to "Log in", '#' %></li>
          </ul>
        </nav>
      </div>
    </header>
：

※headerのclassはnavbar navbar-fixed-top navbar-inverseとしてもチュートリアル通りに黒背景にならなかったため、変更しています。

[custom.scss]

@import "bootstrap-sprockets";
@import "bootstrap";
：
#logo {
  float: left;
  margin-right: 10px;
  font-size: 1.7em;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: -1px;
  padding-top: 9px;
  font-weight: bold;
}

[application.scss]

:
 *= require_tree .
 *= require_self
 */

関係ありそうな個所を抜粋してみました。よろしくお願いします。

Answer 1

直接的な回答ではないですがBoostrapなどが読み込まれているか確認いただくのが良いと思います。

下記のようなChromeのDevelopertoolsを利用したやり方は問題の切り分けに大きく役立つと思います。
https://tonari-it.com/chrome-developertools/

上記の結果をもとにBootstrapが読み込まれていないか、設定したクラスが間違っていないかといったところを確認していくと良いと思います。

Comments

[mugichon]

ご回答ありがとうございます！
おかげ様で原因がわかりました。
bootstrap3ではなく、4がインストールされていたようで、
バージョン間の互換性の問題のようでした。

[no1knows]

それは良かったです！