Bootstrap 4.0.0选项卡无法正常工作咨询，3.3.7版本可正常显示

我帮你排查了这个问题，根源在于Bootstrap 4对选项卡组件的实现做了不少不兼容的改动，和Bootstrap 3的写法没法直接通用。下面给你拆解关键差异，再给出适配Bootstrap 4.0.0的正确代码：

核心差异点 #

• 新增依赖项：Bootstrap 4的组件（包括选项卡）依赖Popper.js，这是Bootstrap 3没有的要求，必须在Bootstrap JS之前引入。
• 导航结构类名调整：
  • 原来的<li>标签需要添加.nav-item类
  • 内部的<a>标签需要添加.nav-link类
  • 激活状态的.active类要加到.nav-link上，而不是父级<li>
• 面板显示类名变化：Bootstrap 3里的.tab-pane.in.active要改成.tab-pane.show.active，移除了.in类，改用.show控制显示状态。

适配Bootstrap 4的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Tab Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Bootstrap 4 CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css">
  <!-- jQuery -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <!-- Popper.js (Bootstrap 4依赖) -->
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js"></script>
  <!-- Bootstrap 4 JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Dynamic Tabs</h2>
  <ul class="nav nav-tabs">
    <li class="nav-item">
      <a class="nav-link active" data-toggle="tab" href="#home">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#menu1">Menu 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#menu2">Menu 2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#menu3">Menu 3</a>
    </li>
  </ul>

  <div class="tab-content">
    <div id="home" class="tab-pane fade show active">
      <h3>HOME</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div id="menu1" class="tab-pane fade">
      <h3>Menu 1</h3>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <div id="menu2" class="tab-pane fade">
      <h3>Menu 2</h3>
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
    </div>
    <div id="menu3" class="tab-pane fade">
      <h3>Menu 3</h3>
      <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
    </div>
  </div>
</div>

</body>
</html>

总结 #

按照上面的改动调整后，你的选项卡在Bootstrap 4.0.0里就能正常切换了。核心就是要遵循Bootstrap 4的组件规范，它和3.x版本在结构类名、依赖项上的差异比较大，直接迁移旧代码肯定会出问题。

内容的提问来源于stack exchange，提问作者RockBoro