如何为响应式折叠导航栏添加仅在移动端显示的底部边框

在构建响应式导航栏时，一个常见需求是：仅在移动端展开菜单时，为每个导航项添加清晰的分隔边框；而在桌面端水平排列时，不显示任何边框。直接在

上设置 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，语义清晰，维护成本低。