本文详解如何使用 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+）
<nav class="navbar navbar-expand-lg bg-white shadow-sm">
<div class="container-fluid">
<!-- 汉堡按钮（始终存在，仅在小屏可见） -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#mainNavbar" aria-controls="mainNavbar"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- 所有导航内容统一收进 collapse 区域 -->
<div class="collapse navbar-collapse" id="mainNavbar">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<!-- 原外置的 3 个主链接（现在属于导航列表） -->
<li class="nav-item">
<a href="/index.php?action=who_are_we" class="nav-link black_links">
<?php echo $GLOBALS['translation']['who_are_we']; ?>
</a>
</li>
<li class="nav-item">
<a href="/index.php?action=list_activities" class="nav-link black_links">
<?php echo $GLOBALS['translation']['schedule']; ?>
</a>
</li>
<li class="nav-item">
<a href="/index.php?action=contact" class="nav-link black_links">
<?php echo $GLOBALS['translation']['contact']; ?>
</a>
</li>
<!-- “更多”下拉项：小屏下展平，大屏下保持下拉 -->
<li class="nav-item dropdown d-lg-block d-xl-block">
<button class="btn btn-link nav-link dropdown-toggle show-more p-0"
data-bs-toggle="dropdown" aria-expanded="false">
<?php echo $GLOBALS['translation']['show_more']; ?>
</button>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item black_links" href="/index.php?action=calendar">
<?php echo $GLOBALS['translation']['calendar']; ?>
</a></li>
<li><a class="dropdown-item black_links" href="/index.php?action=list_news">
<?php echo $GLOBALS['translation']['news']; ?>
</a></li>
<li><a class="dropdown-item black_links" href="/index.php?action=register">
<?php echo $GLOBALS['translation']['subscribe']; ?>
</a></li>
<li><a class="dropdown-item black_links" href="/index.php?action=login">
<?php echo $GLOBALS['translation']['login']; ?>
</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>✅ 关键 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：原代码中 zuojiankuohaophpcnli class="nav-item dropdown btn-group"> 是冗余且易冲突的，navbar-nav 已提供语义化布局，btn-group 会干扰默认样式。
- 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，轻量、可靠、可维护性强。
