本文详解如何使用 bootstrap 5 的 flex 工具类（如 `ms-auto`）将搜索输入框和搜索按钮整体右对齐于导航栏末尾，同时确保输入框宽度严格为 50%，不破坏布局流或触发换行。
在 Bootstrap 5 中，.navbar-collapse 内部默认启用 Flex 布局（display: flex），其子元素（如
- 导航菜单和
? 注意：ms-auto 必须加在 上（而非 ），因为 本身已是 Flex 容器，而 ms-auto 需作用于其子项才能生效；同时保留内联 style="width: 50%" 确保输入框宽度精准可控。
⚠️ 常见误区与修复
- ❌ 移除 style="width: 50%" 并依赖 w-50 类？→ 不推荐。w-50 会使输入框占父容器（即
- ❌ 使用 float: right 或 text-align: right？→ 与 Flex 布局冲突，可能引发渲染错乱或响应式失效。
- ❌ 给
✅ 响应式增强建议（可选）
若需在小屏幕折叠后仍保持搜索功能可用，可结合 navbar-toggler 与 offcanvas 或仅在大屏显示搜索框：
✅ 最终验证要点
- ✅ 输入框宽度 = 父
- ✅ 搜索按钮紧贴输入框右侧，无额外空白；
- ✅ 在 lg、xl 等大屏幕下，搜索组件始终锚定导航栏最右端；
- ✅ 移动端折叠后，搜索框随导航菜单一起收起，不干扰汉堡菜单逻辑。
通过合理运用 Bootstrap 5 的原生 Flex 工具类，无需自定义 CSS 即可优雅、健壮地实现精准右对齐——这是现代响应式开发的推荐实践。
