Question

所以我在这里遇到了一些问题，这些问题一直困扰着我们好几天。点击展开折叠图标时，我们似乎无法让个人资料图标保持在右上角。正如您在图片中看到的，我链接截图1是我们希望它始终出现的方式。驻留在崩溃的右边，并没有像屏幕截图2中那样下降。我们尝试搜索各种线程并尝试所描述的内容无济于事。向右拉，向右浮动，向右导航。似乎没有任何效果，单击展开图标时总是拖拽它。有没有人知道需要添加什么才能解决这个问题？我还会为您提供代码以供您查看。

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）。我遵循您在应用程序中指定的相同媒体宽度。

if (r < 0 || r >= grid.length || c < 0 || c >= grid[0].length || recurseSearch[r][c]) 
    return;
recurseSearch[r][c] = true;

但是，我建议做很多css更改。您可以在使用Bootstrap 4时使用非常简单的css规则。您可以在保留内容的同时摆脱行。删除不必要的空元素，例如

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

和

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

除非您在完整的应用中使用它们。在这种情况下，您应该将它们渲染为Bootstrap 4中的ul li元素。

修改

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

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

Bootstrap 4 Navbar折叠问题

1 个答案: