Bootstrap 4 Navbar Collapse Problem

Question

So habe ich ein kleines Problem hier, das uns seit Tagen aufgehängt hat. Es scheint nicht so, als ob das Profil-Symbol oben rechts angezeigt wird, wenn Sie auf das Symbol zum Erweitern der Minimierung klicken. Wie Sie in den Bildern sehen können, die ich verlinkt habe, ist Screenshot 1, wie wir es immer sehen wollen. Auf der rechten Seite des Einsturzes stationiert und nicht herunterfallen, wie es in Screenshot 2 erscheint. Wir haben versucht, verschiedene Threads zu durchsuchen und haben versucht, was ohne Erfolg beschrieben wurde. Pull-rechts, Float-rechts, Navbar-rechts. Nichts scheint zu funktionieren, und es wird immer nach unten gezogen, wenn Sie auf das Erweiterungssymbol klicken. Hat jemand einen Einblick, was hinzugefügt werden müsste, um dieses Problem zu beheben? Ich werde den Code auch für Sie einbeziehen.

Screenshot 1

Screenshot 2

aktualisieren, hier ist mein Codepen Es ist nicht schön aussieht, weil alle Rubin Links entfernt werden, obwohl der Fehler noch vorhanden mit dem Profilbild ist nach unten fallen, wenn der Verlängerung Minimierungsmodus

<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 erfordert viele Änderungen. Die meisten Ihrer Probleme beziehen sich auf die Verwendung vieler unnötiger HTML-Elemente mit einer ungeraden Anzahl von Spalten. Wenn das Dropdown-Menü angezeigt wird, umfasst es ein zusätzliches Leerzeichen und geht zur nächsten Zeile. Ein kurzer Weg, um Ihr Problem zu beheben, besteht darin, die Position Ihres Dropdown-Menüs auf absolut festzulegen. Sie können die folgenden CSS hinzufügen (aktualisiert CodePen). Ich folgte der gleichen Medienbreite, die Sie in Ihrer Anwendung angeben.

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

Allerdings würde ich empfehlen, viele CSS-Änderungen zu tun. Sie können sehr einfache CSS-Regeln verwenden, wenn Sie Bootstrap 4 verwenden. Sie können die Zeile loswerden, während Sie den Inhalt behalten. Entfernen Sie unnötige leere Elemente wie

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

und

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

, wenn Sie sie in Ihrer vollständigen App verwenden. In solch einem Fall sollten Sie sie als ul li-Elemente wie in Bootstrap 4 rendern.

bearbeiten

Um den Hintergrund des Drop-Down-Menü zu aktualisieren, können Sie die folgende versuchen. Die Farbe Grün dient nur zum Testen. Hier ist ein aktualisierter CodePen.

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

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