html - Bootstrap 导航和导航栏类未正确显示

Question

例如，这里我将 nav-justified 作为导航类，它应该在屏幕宽度上均匀分布链接。

<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>