Bootstrap导航和导航栏类显示不正确

Question

例如，在这里我将nav-justified作为一个nav类，该类应该将链接均匀地分布在屏幕的整个宽度上。

<nav id="header" class="nav nav-pills nav-justified">
    <a class="nav-item nav-link active" href="#">Active</a>
    <a class="nav-item nav-link" href="#">Link</a>
    <a class="nav-item nav-link" href="#">Link</a>
    <a class="nav-item nav-link disabled" href="#">Disabled</a>
</nav>

<div id="main" class="container"> Content</div>

<div id="footer" class="container">
    <p>&copy;
        <time datetime="2018">2018</time> JT </p>
</div>

<script src="../js/bootstrap.min.js"></script>
<script src="../js/main.js"></script>

但是它是这样做的：

在左侧对齐但未居中的链接的屏幕截图：

我的main.js为空，而main.css仅更改背景颜色。我的bootstrap.min.js和bootsrtap.min.css均已正确链接。

Answer 1

在使用Bootstrap 4.1.2的以下代码段中，代码似乎可以正常工作。您是否已签入开发人员工具以确保您没有任何冲突的样式规则？

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.bundle.min.js"></script>

<nav id="header" class="nav nav-pills nav-justified">
  <a class="nav-item nav-link active" href="#">Active</a>
  <a class="nav-item nav-link" href="#">Link</a>
  <a class="nav-item nav-link" href="#">Link</a>
  <a class="nav-item nav-link disabled" href="#">Disabled</a>
</nav>

<div id="main" class="container"> Content</div>

<div id="footer" class="container">
  <p>&copy;
    <time datetime="2018">2018</time> JT </p>
</div>

Answer 2

啊，我不得不链接bootstrap.bundle.min.js而不是bootstrap.min.js