BS5移动端汉堡菜单布局异常 需调整位置及搜索按钮显示

我使用Bootstrap 5开发页面，桌面端导航功能正常，但移动端存在布局问题。需要在保留桌面端视图完全不变的前提下，实现以下移动端效果：

• 搜索按钮显示在汉堡菜单旁，而非隐藏在汉堡菜单的下拉内容里；
• 汉堡菜单与搜索按钮相邻显示，而非位于屏幕中间。
  直接调整DIV位置会引发更多布局异常，以下是解决方案：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">

<header class="menu">
  <nav class="navbar navbar-expand-sm">
    <div class="container d-flex justify-content-between">
      <a class="navbar-brand" href="/">
        Logo
      </a>
      <!-- 汉堡按钮与搜索容器组合，实现移动端并排 -->
      <div class="d-flex align-items-center">
        <button class="navbar-toggler me-2" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="search">
          <a data-bs-toggle="offcanvas" href="#demo">SEARCH</a>
        </div>
      </div>
      <div id="navbarCollapse" class="collapse navbar-collapse">
        <ul id="menu-main-menu-1" class="navbar-nav">
          <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7"><a href="/">Sample Page</a></li>
          <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-8"><a href="/">Uncategorized</a></li>
        </ul>
      </div>
    </div>
  </nav>
  <div class="offcanvas offcanvas-top" id="demo">
    <div class="container">
      <div class="row">
        <div class="col-lg-11 col-11">
          <section id="block-9" class="widget_block">
            <div class="wp-container-1 wp-block-group">
              <div class="wp-block-group__inner-container">
                <form role="search" method="get" action="/" class="wp-block-search__no-button alignleft wp-block-search"><label for="wp-block-search__input-1" class="wp-block-search__label screen-reader-text">Search</label>
                  <div class="wp-block-search__inside-wrapper"><input type="search" id="wp-block-search__input-1" class="wp-block-search__input " name="s" value="" placeholder="Search..." required=""></div>
                </form>
              </div>
            </div>
          </section>
        </div>
        <div class="col-lg-1 col-1">
          <button type="button" class="float-end btn-close mt-2" data-bs-dismiss="offcanvas"></button>
        </div>
      </div>
    </div>
  </div>
</header>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>

关键修改说明 #

1. 给导航容器添加d-flex justify-content-between类，让Logo与右侧操作区两端对齐，确保桌面端原有布局不受影响；
2. 将汉堡按钮和搜索容器包裹在d-flex align-items-center容器内，实现移动端两者垂直居中并排显示；
3. 给汉堡按钮添加me-2类，设置与搜索按钮的间距，优化视觉体验；
4. 保留原有折叠菜单逻辑，桌面端菜单展开功能正常运行。

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