如何在lg断点处将Bootstrap汉堡菜单图标移至指定div？

问题场景 #

我用Bootstrap 5.3实现了offcanvas导航栏：小屏幕下显示汉堡图标，屏幕宽度达到lg断点后切换为普通菜单。现在需要在屏幕缩小到lg断点（宽度≤991px）时，把汉堡图标移动到id为logo的div中，尝试多次未成功，相关代码如下：

导航栏代码

<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <button class="navbar-toggler border-3" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarOffcanvasLg" aria-controls="navbarOffcanvasLg">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="offcanvas offcanvas-start" tabindex="-1" id="navbarOffcanvasLg" aria-labelledby="navbarOffcanvasLgLabel">
    <div class="offcanvas-header">
      <h5 class="offcanvas-title" id="offcanvasNavbarLabel">Menüü</h5>
      <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">...
  </div>
</nav>

目标div代码

<div class="col-6 g-0" id="logo">...</div>

解决方案 #

核心思路是监听窗口尺寸变化，结合Bootstrap的lg断点阈值（992px），动态调整汉堡按钮的父元素，同时保留原始父节点用于恢复。

步骤1：编写JavaScript逻辑

添加以下脚本到页面末尾（或DOM加载完成的钩子中）：

// 获取关键元素
const navbarToggler = document.querySelector('.navbar-toggler');
const logoContainer = document.getElementById('logo');
// 保存按钮的原始父元素，用于窗口放大时恢复
const originalParent = navbarToggler.parentElement;

// 定义移动/恢复按钮的函数
function adjustTogglerPosition() {
  const currentWidth = window.innerWidth;
  // Bootstrap lg断点为992px，小于等于991px时移动按钮
  if (currentWidth <= 991) {
    // 避免重复移动，只有按钮不在目标容器时才执行
    if (navbarToggler.parentElement !== logoContainer) {
      logoContainer.appendChild(navbarToggler);
    }
  } else {
    // 窗口超过lg断点，把按钮放回原始位置
    if (navbarToggler.parentElement !== originalParent) {
      originalParent.appendChild(navbarToggler);
    }
  }
}

// 页面加载时初始化一次，处理初始屏幕尺寸
window.addEventListener('load', adjustTogglerPosition);
// 监听窗口 resize 事件，实时调整按钮位置
window.addEventListener('resize', adjustTogglerPosition);

步骤2：自定义样式（可选）

如果移动后的汉堡按钮位置不符合需求，可以添加CSS调整：

#logo .navbar-toggler {
  /* 示例：让按钮靠右对齐 */
  margin-left: auto;
  margin-right: 1rem;
}

注意事项

• 如果页面中有多个.navbar-toggler，建议给目标按钮添加专属id（比如id="mobile-menu-toggler"），然后用document.getElementById('mobile-menu-toggler')获取，避免误操作其他按钮
• 确保#logodiv在DOM中存在，且没有被设置为display: none等隐藏属性

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