Bootstrap 4 - 下拉菜单无法与移动菜单一起正常工作答案

【问题标题】：Bootstrap 4 - Dropdown not working properly with mobile menuBootstrap 4 - 下拉菜单无法与移动菜单一起正常工作
【发布时间】：2021-06-24 06:50:51
【问题描述】：

在所有设备上，导航栏都可以正常工作，但我不知道为什么，在移动设备上，当我点击头像（显示切换菜单）时，品牌形象在移动...

gif of the issue

ERB 代码：

 <div class="navbar navbar-expand-sm navbar-light navbar-brand">
  <%= link_to songs_path, class: "navbar-brand" do %>
    <%= image_tag "https://res.cloudinary.com/dnzggrpqe/image/upload/v1614710692/logo_kf5loy.png", class: "brand-logo" %>
  <% end %>

  <div id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <% if user_signed_in? %>
        <li class="nav-item dropdown">
          <%= image_tag "https://res.cloudinary.com/dnzggrpqe/image/upload/v1614709216/song_book_user_2_ivhkgt.png", class: "avatar dropdown-toggle", id: "navbarDropdown", data: { toggle: "dropdown" }, 'aria-haspopup': true, 'aria-expanded': false %>
          <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
            <%= link_to "Dashboard", user_root_path, class: "dropdown-item" %>
            <%= link_to "Log out", destroy_user_session_path, method: :delete, class: "dropdown-item" %>
          </div>
        </li>
      <% else %>
      <li class="nav-item dropdown">
        <%= image_tag "https://res.cloudinary.com/dnzggrpqe/image/upload/v1614709216/song_book_user_2_ivhkgt.png", class: "avatar dropdown-toggle", id: "navbarDropdown", data: { toggle: "dropdown" }, 'aria-haspopup': true, 'aria-expanded': false %>
        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
          <%= link_to "Login", new_user_session_path, class: "dropdown-item" %>
        </div>
      </li>
      <% end %>
    </ul>
  </div>
</div>

CSS 关联：

.navbar-brand {
  display: flex;
  justify-content: space-between;
  color: white;
  width: auto;
  align-items: center;
  margin-top: 10px;
  height: 50px;
}


.navbar-brand .navbar-collapse {
  flex-grow: 0;
}

.navbar-brand .navbar-brand img {
  width: 200px;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.avatar {
  position: sticky;
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 50%;
}

.avatar:hover {
  border: solid 2px;
  border-color: rgb(122, 193, 226);
}

.navbar-light .navbar-nav .nav-link {
  display: none;
}

有人有想法吗？（我知道，关于这个问题有很多问题......）谢谢

【问题讨论】：

标签： ruby-on-rails bootstrap-4

【解决方案1】：

检查您打开的菜单的大小：它有多大？

如果您将该宽度添加到实际的品牌形象中，它可能会太大并开始新的一行。

【讨论】：

感谢您的回答，我试图删除品牌形象，但不幸的是，头像的行为相同 - 尺寸为 160 x 82 像素

【解决方案2】：

我终于找到了解决方案 :) 这确实是一个 css 问题 - 我将导航栏品牌“align-items”从 center 更改为 flex-start，然后减小徽标的宽度，它就可以工作了！

【讨论】：