一个最简单的解决方案是，给搜索输入框本身也加上折叠控制属性：

这样，当用户点击输入框时，就会触发菜单收起。不过，这个方案虽然简单，但不够稳健。例如，当用户点击搜索框后，又切换到其他App，再切回来时，菜单状态可能会卡住。

• 若要追求更稳定的体验，可能需要结合Ja vaScript，监听 focusin、visibilitychange 以及 resize（用于捕获键盘弹出引起的视口高度变化）等多个事件。因为部分安卓定制系统对事件的处理并不标准。
• 注意避免在同一个按钮或元素上同时使用 data-bs-toggle 和手动调用 collapse('toggle') 的JS代码，两者容易产生状态冲突。

`form-control-sm` 是高度对齐的关键，不是可选项

视觉对齐是前端开发中的“细活儿”。默认的 form-control 高度大约在38px，而Bootstrap 5导航栏的默认高度是56px。如果不做任何处理，直接把标准输入框放进导航栏，你会发现它上下留有空白，无法垂直居中，按钮也可能错位，整个搜索区域看起来像是“悬浮”在导航栏里。

因此，必须显式地调整搜索框的尺寸：

• 为 添加 form-control-sm 类（Bootstrap 5）或 input-sm（Bootstrap 4）。
• 与之配套的提交按钮也要加上 btn-sm 类，否则按钮的高度会撑高整个导航栏的布局。
• 如果使用了 input-group 来组合输入框和按钮，请确保整个 input-group 容器被放置在 na vbar-collapse 内部，而不是只包裹输入框本身。
• 尽量避免使用 style="height: 100%" 这种硬编码方式去撑满高度，在复杂的Flex布局中它经常失效。更可靠的做法是使用 calc(100% - 2px) 这类计算值来微调。

然而，真正的挑战往往来自设备差异。不同操作系统和设备对于软键盘弹出时机的判断逻辑不同：iOS通常是先触发视口大小变化（resize），再聚焦输入框（focus）；而部分安卓机型则顺序相反，先聚焦再变化；还有一些WebView环境甚至不触发标准的resize事件。这意味着，仅仅依靠CSS类切换来适配，注定会在某些机型上遇到问题。要彻底解决，可能需要更复杂的、基于Ja vaScript的视口高度监听与适配逻辑。