引导导航和导航栏类未正确显示答案

【问题标题】：Bootstrap nav and navbar classes aren't displaying properly引导导航和导航栏类未正确显示
【发布时间】：2018-07-24 20:43:38
【问题描述】：

例如，这里我将 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 都链接正确。

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

代码似乎在下面使用 Bootstrap 4.1.2 的 sn-p 中运行良好。您是否检查了开发人员工具以确保您没有任何冲突的样式规则？

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

【讨论】：

【解决方案2】：

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

【讨论】：