Bootstrap：在导航栏中对齐导航

Question

我想用 Bootstrap v4 创建一个导航，但我很挣扎，因为它不像我预期的那样工作。导航应该由两个导航组成，一个在左边，一个在右边。但是，两者都在左侧。

据我了解 Bootstrap 文档，这应该有效。但事实并非如此。我的错在哪里？

我正在使用justify-content-end 类，应该没问题吧？

<nav class="nav">

/* This should be on the left side */
<ul class="nav justify-content-start">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

/* This should be on the right side */
<ul class="nav justify-content-end">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

</nav>

Answer 1

改变

<nav class="nav">

到

<nav class="navbar">