本文详解如何使用 bootstrap 构建真正响应式的导航栏——在桌面端显示全部链接（含独立导航项与下拉菜单），在中/小屏幕下自动收拢为汉堡菜单，并将所有导航项（包括原外置的3个链接和下拉子项）统一纳入折叠区域，点击汉堡即展开完整列表，无需二次点击“show more”。
要实现符合现代响应式设计规范的导航栏（即：大屏平铺展示全部导航项 + 下拉菜单；小屏一键展开完整菜单，无嵌套二级触发），关键在于结构重构与CSS 媒体查询精准控制，而非依赖 Bootstrap 默认的 dropdown 组件在折叠状态下的嵌套行为。
✅ 正确结构逻辑
Bootstrap 的 .navbar-collapse 区域应包含所有需响应式收起的导航内容。原代码中将 who_are_we、schedule、contact 三个链接置于 .collapse 外部，导致它们在小屏下“消失”；而 dropdown 又被包裹在 .collapse 内部，造成“汉堡 → 点击 Show More → 再点才展开子项”的冗余交互。解决方案是：
- 所有导航项（含原外置链接 + 下拉子项）统一移入 .collapse 容器内；
- 移除小屏下不必要的下拉按钮（.show-more），直接展平所有菜单项；
- 利用媒体查询在小屏下隐藏原下拉触发按钮，并强制显示其子菜单项。
✅ 推荐 HTML 结构（Bootstrap 5+）
✅ 关键 CSS 媒体查询（解决核心问题）
/* 小屏（≤991px）：隐藏“Show More”按钮，强制显示其下拉菜单项为平铺列表 */
@media (max-width: 991.98px) {
.show-more {
display: none !important;
}
.dropdown-menu {
display: flex !important;
flex-direction: column;
position: static !important; /* 取消绝对定位，使其融入流式布局 */
width: 100%;
padding: 0;
margin-top: 0;
}
.dropdown-menu .dropdown-item {
padding: 0.5rem 1rem;
}
/* 可选：为小屏菜单项添加 hover/focus 样式 */
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
background-color: #f8f9fa;
}
}⚠️ 注意事项与最佳实践
- 不要混用 btn-group 和 navbar-nav：原代码中
- PHP 变量安全输出：确保 $GLOBALS['translation'] 中的内容已通过 htmlspecialchars() 过滤，防止 XSS（例如：php echo htmlspecialchars($GLOBALS['translation']['who_are_we'], ENT_QUOTES, 'UTF-8'); ?>）。
- Bootstrap 版本一致性：示例基于 Bootstrap 5.x（使用 data-bs-* 属性）。若用 Bootstrap 4，请改用 data-toggle / data-target。
- 移动端可访问性：确保所有链接有足够点击热区（最小 44×44px），并在小屏下为 .dropdown-menu 添加 role="menu" 和子项 role="menuitem"（如需 WCAG 合规）。
✅ 总结
真正的响应式导航 = 结构先行 + 语义清晰 + CSS 精准干预。将全部导航项纳入 .collapse 是基础；用媒体查询在小屏下“展平”下拉菜单，替代二次交互，是提升用户体验的关键。此方案兼容 Bootstrap 5 原生机制，无需额外 JS，轻量、可靠、可维护性强。
