Bootstrap v5.2中.navbar-dark类不生效是什么原因？

云原生阿岚

2026-8-26

问题原因

.navbar-dark 的颜色规则仅对导航栏内的Bootstrap标准导航子组件生效，包括.navbar-brand、.nav-link、.navbar-text、导航内置表单控件等，不会直接作用于<nav>标签下无标签包裹的裸文本，因此直接写在nav标签里的文本不会自动切换为适配深色背景的浅色。

问题复现代码

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
  </head>
  <body>
    <nav class="navbar navbar-dark bg-dark">Something</nav>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
  </body>
</html>

修复方法

方法1：使用导航栏专用文本类包裹内容
给裸文本套上<span class="navbar-text">标签，该类会自动适配.navbar-dark的颜色规则，修改后导航部分代码如下：
```
<nav class="navbar navbar-dark bg-dark">
  <span class="navbar-text">Something</span>
</nav>
```
方法2：手动添加文本颜色工具类
如果不想新增嵌套标签，直接给nav标签追加文本颜色类即可，比如加text-white类，强制文本显示为白色适配深色背景：
```
<nav class="navbar navbar-dark bg-dark text-white">Something</nav>
```