railsにてbootstrapのドロップダウンメニューを作りたい

Question

bootstrapを使用してドロップダウンメニューをつくりたいのですが、画像のように,ナビゲーションアイテムが
ボタン(Dropdown　button)部分に納まらない状態です。ご指摘願います。

<application.html.erb>

,,,,,,

  <header>
      <%#div class="flex-contents"%>
        <%= link_to 'JoinApp3', root_path, :style=> "font-size:30px;" %>
       <div class="dropdown">
         <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
             Dropdown button
         </button>

          <div class="navbar_item dropdown-menu " aria-labelledby="dropdownMenuButton" >
            　<% if user_signed_in? %>
                <div class="after_contents">
                  <%= link_to "ログアウト", destroy_user_session_path, method: :delete, class:"dropdown-item"%>
                  <%= link_to "マイページ" ,profile_mypage_path(id: current_user) %>
                  <%= link_to "コミュニティを作成", new_community_path(id: current_user) %>
                </div>
                <%#= link_to '投稿したコミュニティ' , posted_community_mypage_path(id: current_user) %>
                <%#= link_to 'フォローしたコミュニティ', following_community_mypage_path(id: current_user) %>
              <%else%>
                <div class="before_contents">
                  <%= link_to "ログイン", new_user_session_path, class:"dropdown-item" %>
                  <%= link_to "新規登録", new_user_registration_path, class:"dropdown-item"%>
                </div>
              <%end%>
          </div>
        </div>

    </header>
 ,,,,,

Comments

[m.ts10806]

>bootstarp
「ブートストラップ」です。
https://getbootstrap.jp/

Answer 1

bootstrap用のgemだけでは動かなかったで以下を追記しました。
ドロップダウンはサードパーティのライブラリであるPopper.jsを使って構築されているためpopper.min.jsが必要です。

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>

 <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>---

<bootstrapドギュメント>
https://getbootstrap.jp/docs/5.0/components/dropdowns/