直接改 .navbar 的 border-bottom-color 即可，但需先确认其是否真有边框（默认无）、避免被更高权重规则覆盖，并通过 [data-bs-theme="dark"] .navbar 单独适配暗色模式。
直接改 .navbar 的 border-bottom-color 就行，但得先确认它有没有边框、是否被其他规则覆盖，以及暗色模式下是否同步适配。
检查导航栏是否真有边框
Bootstrap 5 默认的 .navbar 不带边框——它靠 margin 或父容器分隔，不是靠自身 border。如果你看到“边框”，大概率是以下之一：
- 父级容器（如
.container或自定义 wrapper）加了border-bottom -
.navbar被手动加了border-bottom类或内联样式 - 用了
.navbar-expand-* .navbar-nav > li > a的下划线模拟边框（常见于旧版 hack）
用 DevTools 的 Computed 面板查 border-bottom-width，值为 0px 就说明没边框，强行设 border-bottom-color 没用。
有边框时怎么安全覆盖颜色
如果确认 .navbar 确实设置了 border-bottom（比如你加了 border-bottom 类，或继承自某个主题类），覆盖方式要分情况：
- 只改颜色：直接写
.navbar { border-bottom-color: #2c3e50; } - 同时控制粗细和样式：用完整声明
border-bottom: 2px solid #2c3e50;，避免仅设 color 被其他border规则重置 - 防被
.navbar-light/.navbar-dark覆盖：提高选择器权重，例如.navbar.navbar-light { border-bottom-color: #2c3e50; } - 避免影响所有 navbar：加自定义 class，如
.my-navbar { border-bottom-color: #2c3e50; }，再给 HTML 元素加该 class
暗色模式下边框变淡或消失怎么办
Bootstrap 5.3+ 使用 CSS 变量 --bs-border-color 控制默认边框色，它会随 data-bs-theme="dark" 自动变浅。你硬写的 border-bottom-color 可能被变量值覆盖，尤其当规则在 Bootstrap 之前加载时。
- 推荐方案：用
[data-bs-theme="dark"] .navbar { border-bottom-color: #4a5568; }单独适配暗色模式 - 全局统一改：在 Bootstrap 加载后，往
:root里重设变量--bs-border-color，但注意这会影响.card、.form-control等所有用到该变量的组件 - 别依赖
!important临时救急——它掩盖了加载顺序问题，上线前必须清理
移动端折叠菜单弹出后边框不一致
折叠后的菜单区域（.navbar-collapse.show 或 .dropdown-menu）默认无边框，但如果你给它们加了边框，要注意：
-
.navbar-collapse.show是透明容器，边框需显式加在它身上，否则看不到 -
.dropdown-menu默认有border: 1px solid var(--bs-border-color)，改它就得同步改--bs-border-color或直接覆盖border-color - 折叠菜单的边框和主导航栏边框颜色不一致时，视觉上会断裂——建议用同一套色值管理，比如都取自
--bs-primary
真正容易被忽略的是：边框是否在滚动时仍保持可见。如果导航栏用了 position: sticky，而边框色和页面背景太接近，用户快速滚动时可能根本注意不到那条线——这时候与其调色，不如加一点 box-shadow: 0 1px 2px rgba(0,0,0,0.08) 做视觉锚点。
