如何使用本地Bootstrap 4.0的bootstrap.min.css让nav nav-tabs正常显示？

你之前用Bootstrap 3.3.7的CDN能正常显示tab组件，但换成本地Bootstrap 4.0的CSS后就出问题了，这主要是因为Bootstrap 4和3的组件依赖、类结构以及配套JS都有不少变化，下面给你一步步解决的方法：

1. 替换配套的JS文件为Bootstrap 4.0版本 #

Bootstrap 4.0的组件（包括tab切换）依赖jQuery 3.x和Popper.js，而且必须使用Bootstrap 4.0对应的JS文件，不能继续沿用3.3.7的JS。你需要：

• 引入本地的Bootstrap 4.0版本bootstrap.min.js
• 把jQuery替换为3.x版本（本地或CDN均可，建议选和Bootstrap 4兼容的版本，比如3.4.1）
• 引入Popper.js（Bootstrap 4.0需要它处理弹出类组件的交互逻辑）

示例引入代码：

<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- 先引入jQuery 3.x -->
<script src="js/jquery-3.4.1.min.js"></script>
<!-- 再引入Popper.js -->
<script src="js/popper.min.js"></script>
<!-- 最后引入Bootstrap 4.0的JS -->
<script src="js/bootstrap.min.js"></script>

2. 调整HTML结构适配Bootstrap 4规范 #

Bootstrap 4保留了nav nav-tabs类，但补充了更规范的子元素类名，确保样式和交互完全正常：

• 给<li>标签添加nav-item类
• 给<a>标签添加nav-link类
• 激活项的active类需要同时确保<li>和对应的tab-pane正确标记

调整后的完整HTML示例：

<div>
  <ul class="nav nav-tabs">
    <li class="nav-item active settingshead">
      <a class="nav-link" href="#first" data-toggle="tab">1</a>
    </li>
    <li class="nav-item settingshead">
      <a class="nav-link" href="#second" data-toggle="tab">2</a>
    </li>
  </ul>
</div>
<div class="tab-content">
  <div class="tab-pane active" id="first">
    <div class="namedesig">
      <h4>Dr. Jane Doe</h4>
      <p>PhD in Applied Physics</p>
    </div>
  </div>
  <div class="tab-pane" id="second">
    <div class="namedesig">
      <h4>Dr. Martin</h4>
      <p>PhD in Applied Chemistry</p>
    </div>
  </div>
</div>

3. 验证本地Bootstrap文件的完整性和路径 #

• 确认本地的css/bootstrap.min.css确实是Bootstrap 4.0版本，避免下载错误的3.x文件
• 检查文件路径是否正确：如果HTML文件在根目录，css/bootstrap.min.css路径没问题；如果HTML在子文件夹，需要调整为相对路径（比如../css/bootstrap.min.css）

按以上步骤操作后，你的nav-tabs组件就能正常显示和切换了。

内容的提问来源于stack exchange，提问作者Andrew Kin Fat Choi