Bootstrap导航栏：空间不足时将溢出菜单项纳入下拉菜单的实现咨询

看起来你已经找到了一个相当实用的解决方案！这个思路完美契合了「空间不足时自动把溢出的Bootstrap导航栏菜单项收纳到下拉菜单」的需求，实际运行效果也完全符合预期对吧？

我帮你把代码整理成更清晰的格式，方便后续维护和参考：

JavaScript 核心逻辑 #

const contentBar = document.querySelector(".context-bar")
const dropdown = document.querySelector(".grouped-content")

const update = () => {
  const offsetTop = contentBar.offsetTop
  dropdown.innerHTML = ""

  document.querySelectorAll(".context-bar > a").forEach((item) => {
    if (item.offsetTop > offsetTop) {
      let li = document.createElement("li")
      li.innerHTML += item.outerHTML
      dropdown.appendChild(li)
    }
  })
}

update()
window.addEventListener("resize", update)

配套样式参考 #

/* 配合核心逻辑的基础样式，可结合Bootstrap原生样式调整 */
.context-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  /* 可补充Bootstrap导航栏的默认样式继承 */
}
.grouped-content {
  list-style: none;
  padding: 0;
  margin: 0;
  /* 结合Bootstrap dropdown组件的样式，确保下拉菜单正常渲染 */
}

这个实现的核心思路特别巧妙：通过对比每个菜单项的offsetTop和导航栏容器的offsetTop，精准判断菜单项是否因为空间不足被挤到了下一行（也就是发生了溢出），然后动态把这些溢出项转移到下拉菜单中。同时监听窗口 resize 事件，保证窗口大小变化时能实时更新菜单状态，细节考虑得很周全。

备注：内容来源于stack exchange，提问作者Meek