为什么 nav-link 项目在这种黑暗 Bootstrap 4 Nav 中不会变白？

Question

为什么 nav-link 颜色不会因为这个黑暗 Bootstrap 4 Nav code snippet? I mean, they should work as Navbars 而变成白色。他们不应该吗？

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<main role="main">
  <div class="row navbar-dark bg-dark">
    <ul class="nav">
      <a class="nav-link" href="#">Growing</a>
      <a class="nav-link" href="#">Know</a>
      <a class="nav-link" href="#">What's New</a>
    </ul>
  </div>
</main>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>

编辑：我添加了第三项，使水平布局更加清晰。

Answer 1

您缺少 Bootstrap 的一些正确语义。

您的导航应该包含在实际的 <nav> 标签中。
您的锚标签应包含在 <li> 个标签中。
您没有使用通常与 <ul> 标签一起使用的正确类。

仅供参考：请注意，有一个 none-responsive（布局将保持水平）和一个响应式布局（布局将在较小的屏幕上转变为垂直方向）。

正确的 Bootstrap 导航语义示例（non-responsive，项目将保持水平布局）：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" rel="stylesheet"/>

<main role="main">
  <nav class="navbar navbar-expand navbar-dark bg-dark">
    <ul class="navbar-nav me-auto">
      <li class="nav-item">
        <a class="nav-link" href="#">Growing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Know</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">What's New</a>
      </li>
    </ul>
  </nav>
</main>

正确的 Bootstrap 导航语义示例（响应式）：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" rel="stylesheet"/>

<main role="main">
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
      <li class="nav-item">
        <a class="nav-link" href="#">Growing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Know</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">What's New</a>
      </li>
    </ul>
  </nav>
</main>

为什么 nav-link 项目在这种黑暗 Bootstrap 4 Nav 中不会变白？

Why the nav-link items don't turn white in this dark Bootstrap 4 Nav?

html

css

twitter-bootstrap

bootstrap-4