本文介绍如何使用 css 媒体查询，为 bootstrap 响应式导航栏中的菜单项（`
在构建响应式导航栏时，一个常见需求是：仅在移动端展开菜单时，为每个导航项添加清晰的分隔边框；而在桌面端水平排列时，不显示任何边框。直接在 <ul> 上设置 border-bottom 会导致桌面端出现冗余横线，而仅作用于 <li> 的全局样式又会在大屏下错误地渲染边框——这正是原问题的核心矛盾。
✅ 正确解法：媒体查询 + 精准选择器
关键在于利用 Bootstrap 的响应式断点逻辑，结合 CSS 媒体查询，将边框样式严格限定在移动端折叠菜单激活状态下的 <li> 元素上。推荐使用 max-width: 991.98px（对应 Bootstrap 5 的 lg 断点以下），确保与 .navbar-collapse 的默认折叠行为一致：
/* 仅在移动端（折叠菜单可见时）为每个菜单项添加底部边框 */
@media (max-width: 991.98px) {
.navbar-collapse .navbar-nav > li {
border-bottom: 2px solid #333;
padding: 8px 0;
}
/* 可选：移除最后一项的多余边框，提升视觉整洁度 */
.navbar-collapse .navbar-nav > li:last-child {
border-bottom: none;
}
}? 为什么用 max-width: 991.98px？ Bootstrap 5 默认在 992px（lg）及以上宽度自动展开导航栏（.navbar-expand-lg）。使用 991.98px 可精确覆盖所有折叠场景（含平板竖屏），避免边界值抖动。
? 实际应用要点
- 移除 <ul> 上的内联 border-bottom：原代码中 <ul style="border-bottom: 1px solid #aaa;"> 是导致桌面端误显的根本原因，必须删除。
- 避免对 <a> 或 <h3> 直接加边框：应作用于 <li>，确保边框高度与行高匹配，且不受内部标签 display 影响。
- 增强可访问性：建议为边框添加足够对比度（如 #333 而非浅灰 #aaa），并配合 padding 提升点击热区。
- 兼容性保障：该方案兼容所有现代浏览器及 Bootstrap 5+，无需额外 JavaScript。
✅ 最终效果验证
| 设备类型 | 导航状态 | 边框表现 |
|---|---|---|
| 桌面端 | 水平展开 | ❌ 无任何底部边框 |
| 移动端 | 折叠菜单展开后 | ✅ 每个 <li> 有独立底部边框（末项可选隐藏） |
通过此方案，你既能保持 Bootstrap 原生响应式逻辑，又能以极简 CSS 实现专业级的移动端菜单分隔体验——无需修改 HTML 结构，不依赖 JS，语义清晰，维护成本低。
