引导程序 4 导航栏折叠问题

Question

所以我这里有一个问题，已经把我们挂了好几天了。单击展开折叠图标时，我们似乎无法让配置文件图标保持在右上角。正如您在我链接的屏幕截图 1 的图片中看到的那样，我们希望它始终显示。驻扎在折叠的右侧，而不是像屏幕截图 2 中所示的那样下拉。我们尝试搜索各种线程，并尝试了所描述的内容，但无济于事。右拉、右浮动、导航栏右。似乎没有任何效果，单击展开图标时总是向下拖动。有没有人知道需要添加什么来解决这个问题？我还将包含代码供您查看。

截图 1

截图 2

更新，这是我的代码笔 它看起来并不漂亮，因为所有 ruby 链接都被删除了，尽管在扩展折叠模式时配置文件图片下拉仍然存在错误。

<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(更新的代码笔)。我遵循了您在应用程序中指定的相同媒体宽度。

@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">, 

除非您在完整应用程序中使用它们。在这种情况下，您应该将它们呈现为 ul li 元素，如在 Bootstrap 4 中一样。

编辑

为了更新下拉菜单的背景，您可以尝试以下操作。绿色仅用于测试。这是一个更新的CodePen。

@media (max-width: 768px){
#navbarNav{
position: absolute;
top: 70px;
} 
.navbar-nav.navbar-left{
background-color: green;
}
}