ヘッダーの編集

[masaya7]

bootstrap5を使用してドロップダウンを作成しています。 公式サイトより以下のコードをコードを参照しました。 実行したところ、動画のように画面いっぱいにボタンが伸びる仕様になっていました。 そこでデベロッパーツールを使用して確認したところ、".show"の"min-height: 100vh;"をコメントアウトすることで理想の形になりました。 そのため"application.scss"の".show"の"min-height: 100vh;"を削除してブラウザに戻りました。 ですが、同じくボタンが伸びてしまいました。再度デベロッパーツールで確認したところ、先ほど削除した".show"の"min-height: 100vh;"が残っていました。 変更内容なぜ反映されないのか、原因が追求できずに詰まっています。 application.scss変更前 application.scss変更後：ドロップメニューの背景が透明なのは後日修正

試したこと

rails7でbootstrap5を導入を再度確認 参照サイト ブラウザのキャッシュ削除 スーパーリロード 記述確認

importmap.rb

pin "bootstrap", to: "https://ga.jspm.io/npm:bootstrap@5.3.0/dist/js/bootstrap.esm.js"
pin "@popperjs/core", to: "https://ga.jspm.io/npm:@popperjs/core@2.11.8/lib/index.js"

から

pin "bootstrap", to: 'bootstrap.min.js', preload: true
pin "popper", to: 'popper.js', preload: true

に変更したら、スタイルが当たるようになった！！！

app/asetts/stylesheets/application.scss

.show {
  list-style: none;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  /*min-height: 100vh;*/
}

_header.html.erb

<nav class="navbar navbar-dark bg-dark" style="height: 60px;">
  <div class="container-fluid">
    <div class="navbar-logo">
      <%= image_tag 'logo.png', id: 'logo', size: '50x50' %>
      <% if logged_in? %>
        <%= link_to "museum-app", index_path, class: "navbar-brand" %>
      <% else %>
        <%= link_to "museum-app", root_path, class: "navbar-brand" %>
      <% end %>
    </div>
    <ul class="navbar-nav d-none d-lg-flex flex-row">
      <% if logged_in? %>
        <li><%= button_to "投稿をする", new_post_path, method: :get %></li>
        <li><%= button_to 'ログアウト', logout_path, method: :delete, form: { data: { turbo_confirm: "本当に削除しますか？", turbo_frame: '_top' } } %></li>
        <li><%= button_to @current_user.name + "さんのマイページ",mypage_users_path, method: :get %></li>
        <li>
          <div class="dropdown">
            <a class="btn btn-secondary dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              Dropdown link
            </a>
            <ul class="dropdown-menu" >
              <li><a class="dropdown-item" href="#">Action</a></li>
              <li><a class="dropdown-item" href="#">Another action</a></li>
              <li><a class="dropdown-item" href="#">Something else here</a></li>
            </ul>
          </div>
        </li>
      <% else %>
        <div class="navbar-nav d-none d-lg-flex flex-row">
          <li><%= link_to "ログイン", login_path %></li>
          <li><%= link_to "新規登録", new_user_path %></li>
        </div>
      <% end %>
    </ul>
  </div>
</nav>