Bootstrap 5移动端Hamburger Menu布局异常及按钮移位求助

问题1：移动端汉堡菜单居中而非靠右 #

原因：汉堡菜单与搜索按钮未处于同一右侧布局容器，导航栏的flex对齐设置导致汉堡菜单被挤到中间区域。

修改方案：

• 将汉堡菜单和搜索按钮放入同一个容器（如.navbar-right），给该容器设置display: flex; align-items: center;，确保两者垂直居中对齐。
• 给导航栏设置display: flex; justify-content: space-between;，让左侧Logo与右侧按钮组分别靠两端对齐。
• 移除汉堡菜单上任何导致居中的样式（如margin: auto），若需要间距，给汉堡菜单添加margin-left: 1rem即可。

问题2：点击汉堡菜单时搜索按钮消失到折叠菜单内 #

原因：搜索按钮的DOM结构被包含在汉堡菜单控制的折叠容器（通常是带.collapse类的元素）中，折叠菜单展开/收起时会连带控制它的显示状态。

修改方案：

• 将搜索按钮的DOM元素从折叠容器内移出，放到导航栏外层，与汉堡菜单、Logo同级的右侧区域。
• 确保CSS中搜索按钮在移动端不会被设置display: none，保持固定显示状态。

代码修改示例 #

HTML结构调整

<nav class="navbar">
  <!-- 左侧Logo -->
  <div class="navbar-brand">Your Logo</div>
  
  <!-- 右侧按钮组：搜索 + 汉堡菜单 -->
  <div class="navbar-right">
    <button class="search-btn">Search</button>
    <button class="navbar-toggler" type="button" data-toggle="collapse">☰</button>
  </div>
  
  <!-- 折叠菜单区域（仅包含导航链接） -->
  <div class="collapse navbar-collapse">
    <ul class="navbar-nav">
      <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
      <li class="nav-item"><a class="nav-link" href="#">About</a></li>
      <!-- 其他导航项 -->
    </ul>
  </div>
</nav>

移动端CSS调整（媒体查询内）

@media (max-width: 768px) {
  .navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1rem;
  }
  
  .navbar-right {
    display: flex;
    align-items: center;
  }
  
  .navbar-toggler {
    margin-left: 1rem;
    border: none;
    background: transparent;
    font-size: 1.5rem;
  }
  
  .search-btn {
    /* 保持搜索按钮原有样式，确保不被隐藏 */
    padding: 0.5rem 1rem;
    border: 1px solid #ddd;
    border-radius: 4px;
  }
  
  .collapse.navbar-collapse {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    /* 折叠菜单的收起/展开逻辑由JS控制 */
  }
}

内容的提问来源于stack exchange，提问作者Elaine Byene