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