Ruby on railsでのBootstrap表示が崩れる

Question

こんな感じで崩れてしまいます。

作業を振り返ると
railsにBootstrapのgemをインストール

gem 'bootstrap-sass', '4.3.1'

トップページにnavbarを実装（こちらも4.3.1）

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
      aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
      </ul>
      <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
      </form>
    </div>
  </nav>

既存のcssファイルはscssに変更済み

/*
 * 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, or any plugin's
 * vendor/assets/stylesheets directory 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 bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 */

@import "bootstrap-sprockets";
@import "bootstrap";

Bootstrapのインストールはおそらくできていると予想しています。
表示が崩れるのはasset関連かと思ったのですが原因がわかりませんでした。
ご教授頂ければ幸いです。

Comments

[m.ts10806]

>Bootstrapのインストールはおそらくできていると予想しています。
ブラウザ開発ツールのコンソールにエラーが出ていないか確認してください。
そのうえで、ブラウザの「ソースを表示」からbootstrap本体やjsの読み込み記述がHTMLに入っているか確認してください。

[tomopi3]

コンソールにjQueryの読み込みエラーが出ていました。

HTML（erb）に読み込み記述なしです。

https://kitsune.blog/rails-bootstrap
上記を参考にjsファイルを編集してリロードをしたところ、今度はサーバーエラーになってしまいました。

コンソールからサーバーを再起動したところ
Could not find gem 'bootstrap-sass (= 4.3.1) x64-mingw32' in any of the gem sources listed in your Gemfile.
Run `bundle install` to install missing gems.
とエラーメッセージが表示されました。

[tomopi3]

application.html.erbに読み込み記述ありました。

[m.ts10806]

ブラウザの「ソースを表示」から
を確認してもらいたいので「application.html.erb」という結果にはならないかと思います。

[tomopi3]

ブラウザのソース表示から確認したところ、記述は入っていました。
stylesheetにBootstrap専用のscssを追加したところ解決しました。

ブラウザのコンソールからエラーを発見する方法は知らなかったので、勉強になりました。
ありがとうございます！

[m.ts10806]

Rubyもそうですが、各言語の「デバッグ」の仕方は覚えておく必要があります。

Answer 1

既存のcssファイルを編集する方法だとうまくいきませんでした。

新たにscssファイルを作成し、インポートしたらうまくいきました。

@import "bootstrap-sprockets";
@import "bootstrap";

gem 'bootstrap-sass', '3.4.1'

いじるファイルは2つだけ！