本文详解如何使用 bootstrap 5 的 flex 工具类（如 `ms-auto`）将搜索输入框和搜索按钮整体右对齐于导航栏末尾，同时确保输入框宽度严格为 50%，不破坏布局流或触发换行。
在 Bootstrap 5 中，.navbar-collapse 内部默认启用 Flex 布局（display: flex），其子元素（如
- 导航菜单和
✅ 响应式增强建议（可选）
若需在小屏幕折叠后仍保持搜索功能可用，可结合 navbar-toggler 与 offcanvas 或仅在大屏显示搜索框：
<!-- 仅在 lg 及以上显示搜索框 -->
<form class="d-flex d-lg-flex">
<input class="form-control me-2 ms-auto" type="search" placeholder="Search" aria-label="Search" style="width: 50%;">
<button class="btn btn-outline-light cont" type="submit">
<i class="bi bi-search"></i>
</button>
</form>
✅ 最终验证要点
- ✅ 输入框宽度 = 父
- ✅ 搜索按钮紧贴输入框右侧，无额外空白；
- ✅ 在 lg、xl 等大屏幕下，搜索组件始终锚定导航栏最右端；
- ✅ 移动端折叠后，搜索框随导航菜单一起收起，不干扰汉堡菜单逻辑。
通过合理运用 Bootstrap 5 的原生 Flex 工具类，无需自定义 CSS 即可优雅、健壮地实现精准右对齐——这是现代响应式开发的推荐实践。
