ブートストラップ4 Navbar折りたたみ問題

Question

ここで私は数日間私たちをぶら下げている問題が少しあります。拡張コラプスアイコンをクリックすると、右上にプロフィールアイコンが表示されないようです。私がリンクしている写真の中でわかるように、スクリーンショット1は、いつでも表示されるようにしています。スクリーンショット2に表示されているように、崩壊の右側に配置され、ドロップダウンしません。さまざまなスレッドを検索し、無駄に記述されたものを試しました。プル - 右、フロート - 右、navbar - 右。何も動作していないようで、展開アイコンをクリックすると常に下にドラッグされます。この問題を解決するために何が追加される必要があるかについて誰かが洞察していますか？私はあなたに見てもらうためのコードも含めます。

Screenshot 1

Screenshot 2

アップデートは、ここでエラーが拡張するとき落下まだプロフィール画像と存在しているものの、それはかなりあるため、すべてのルビーのリンクが削除されるのを見ていない私のCodepenです崩壊モード。

<nav class="navbar navbar-expand-md mb-0 pt-0 pb-0 pl-1 navbar-fixed-top 
navbar-light bg-light"> 
<div class="container-fluid" > 
<div class="row" style="width: 100%"> 
    <div id="brand_wrapper" class="navbar-left" style="height: 50px"> 

    <%= link_to "NAVBAR", root_path, class: "navbar-brand navbar-left", id: "brand" %> 

    </div> 
    <!-- Begin - Page links of about and blog wrapper --> 
    <div id="navbar_page_links_wrapper" style="height: 57px;"> 
    <div class="blog navbar-nav my-4 ba_height"> 
     <a class="nav-item nav-link pl-2 mr-2 theme_color navbar_item_link" href="#"> 
     Blog 
     </a> 
    </div> 
    <div class="about navbar-nav my-4 ba_height"> 
     <a class="nav-item nav-link mx-2 ml-0 theme_color navbar_item_link" href="#"> 
     About 
     </a> 
    </div> 
    </div> <!-- End - Page links of about and blog wrapper --> 
    <!-- Start - Search bar and button --> 
    <div class="input-group d-lg-block d-md-none navbar-left navbar_search_bar ml-3 mr-1 ms_sbb" style="height: 50px; width: 215px;"> <!-- Begin - Navbar's Search --> 
    <input id="search_bar" class="form-control my-4" type="text" placeholder="Search for ... " aria-label="Search for ... "> 
    <span class="input-group-btn my-4 ms_sbb"> 
    <!-- Clicking on the "City" button brings you to All Cities. 
     PROGRAMMERS NOTE: Currently, search is not working yet. --> 
     <%= link_to "City", cities_path, id: "city_btn", class: "text-white btn btn-info my-4", type: "button" %> 
    </span> 
    </div> <!-- End - Search bar and button --> 

    <% if user_signed_in? %> <!-- Begin - If Statement showing Profile Link if loggedin, otherwise two log buttons --> 
    <button class="navbar-toggler tog_btn" data-toggle="collapse" data-target="#navbarNav"><span class="navbar-toggler-icon"></span></button> 
    <div class="collapse navbar-collapse pl-0" id="navbarNav"> 
     <ul class="navbar-nav navbar-left"> 
     <li class="nav-item"> 
      <%= link_to "Link 1", city_url(current_user.city.friendly_id), id: "cs_ms", class: "ml-3 pr-3 nav-link mx-2 theme_color navbar_item_link right_border_link" %> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link mx-2 theme_color navbar_item_link right_border_link pr-3" style="margin-left: 2px !important;" href="#">Link 2</a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link mx-2 theme_color navbar_item_link pr-3" style="margin-left: 2px !important;" href="#">Link 3</a> 
     </li> 
     </ul> 
    </div> 
    <div class="col"></div> 
    <div id="dropdown_logged_in" class="dropdown show navbar-right"> 
    <a class="dropdown-toggle mt-3" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
     <%= image_tag current_user.avatar.navbar_pic, id: "nav_facebook_avatar", class: "dropdown-toggle" %> 
    </a> 
    <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink"> 
     <h6 class="dropdown-header center p-1"> <%= link_to "#{current_user.first_name.capitalize}'s Profile", current_user, style: 'width: auto !important; font-size: 16px;', class: 'dropdown-item p-1 center' %> </h6> 
     <div class="dropdown-divider"></div> 

     <%= link_to 'Update', edit_user_registration_path, style: 'font-size: 16px; color: #C361F1;', class: 'dropdown-item p-0 center' %> 
     <hr style="margin-top:3px !important; margin-bottom:3px !important;"> 
     <%= link_to "Logout", destroy_user_session_path, method: :delete, style: 'font-size: 16px; color: #C361F1;', class: 'dropdown-item p-0 center' %> 
    </div> 
    </div> 

    <% else %> <!-- Else statement displaying Login & Signup buttons since User is not signed in --> 
    <div class="col navbar-right pl-0"> 
    <div class= "navbar-right pull-right float-right mt-4"> 
     <%= link_to "<i class='fa fa-user mr-2'></i>Login/Signup".html_safe, new_user_session_path, id: "login-su-btn", class: "btn btn-primary" %> 
    </div> 
    </div> 
     <% end %>     <!-- End - If Statement for displaying Logged status --> 

    </div> 
</div> 

Answer 1

あなたのCSSは多くの変更が必要です。あなたの問題のほとんどは、不均一な列数の不必要なhtml要素をたくさん使用することに関連しています。ドロップダウンメニューが表示されると、追加のスペースに広がり、次の行に移動します。問題を解決する簡単な方法は、プルダウンメニューの位置を絶対に設定することです。以下のCSSを追加することができます（CodePenを更新しました）。私はアプリケーションで指定したのと同じメディア幅に従っていました。

@media (max-width: 768px){ 
    #navbarNav{ 
    position: absolute; 
    top: 70px; 
    } 
} 

しかし、多くのCSS変更を行うことをおすすめします。あなたはBootstrap 4を使用しているように非常に単純なCSSルールを使用できます。コンテンツを保持しながら行を取り除くことができます。あなたはあなたの完全なアプリケーションでそれらを使用していない限り、このような

<div class="col"></div> 

と

<div id="brand_wrapper" class="navbar-left" style="height: 50px">, 

などの不要な空の要素を削除します。そのような場合は、Bootstrap 4のようにul li要素としてレンダリングする必要があります。

編集

ドロップダウンメニューの背景を更新するために、あなたは次のことを試してください。緑色はテスト用です。ここに更新されたCodePenがあります。

@media (max-width: 768px){ 
    #navbarNav{ 
    position: absolute; 
    top: 70px; 
    } 

    .navbar-nav.navbar-left{ 
    background-color: green; 
    } 
}