Bootstrap 4 引导4卡导航未隐藏未选择的内容

我有一个正在尝试使用引导4卡导航。选项卡将出现，但单击它们不会隐藏非活动选项卡。必须有一个配置项目，我遗漏了，但我没有看到它。帮忙

小提琴中的代码是：

<div id="content" class="container">
  <div class="card">
    <div class="card-header bg-dark">
      <ul id="ActionNav" class="nav nav-tabs bg-dark card-header-tabs"
        role="tablist">
        <li class="nav-item">
          <a id="about-tab" class="nav-link active" href="#about"
             data-toggle="tab"
             role="tab" aria-controls="about"
             aria-selected="true">Home</a>
        </li>
        <li  class="nav-item">
          <a id="training-tab" class="nav-link" href="#training"
             data-toggle="tab"
             role="tab" aria-controls="training"
             aria-selected="false">HPC Training</a>
        </li>
      </ul>
    </div>
    <div class="card-body">
      <div class="tab-content">
        <div class="tab-pane fade show active" id="about" role="tabpanel"
           aria-labelledby="about-tab">
          <h2 class="card-title">Training</h2>
          <p class="card-text">first paragraph</p>
          <p class="card-text">second paragraph</p>
        </div>
      </div>
      <div class="tab-pane fade" id="training" role="tabpanel"
         aria-labelledby="training-tab">
        <h2 class="card-title">Training Opportunities</h2>
        <p class="card-text">training 1</p>
        <p class="card-text">training 2</p>
      </div>
    </div>
  </div>
</div>

训练
第一段
第二段
培训机会
培训1

培训2

编辑 小提琴已经激活了jQuery。运行小提琴时，会出现默认的“主页”选项卡。然后单击“培训”选项卡时，培训内容将显示在主页内容下方。主页“选项卡”未隐藏。然后单击任一选项卡似乎什么也不做

编辑2 我的问题是一个错位的

。我有两个

选项卡窗格

块，但第二个窗格在

选项卡内容

块之外。

   <div id="content" class="container">
        <div class="card">
            <div class="card-header bg-dark">
                <ul id="ActionNav" class="nav nav-tabs bg-dark card- 
   header-tabs" role="tablist">
                    <li class="nav-item">
                        <a id="about-tab" class="nav-link active" 
    href="#about" data-toggle="tab" role="tab" aria-controls="about" 
    aria-selected="true">Home</a>
                    </li>
                    <li class="nav-item">
                        <a id="training-tab" class="nav-link" 
    href="#training" data-toggle="tab" role="tab" aria- 
    controls="training" 
    aria-selected="false">HPC Training</a>
                    </li>
                </ul>
            </div>
            <div class="card-body">
                <div class="tab-content">
                    <div class="tab-pane fade show active" id="about" 
    role="tabpanel" aria-labelledby="about-tab">
                        <h2 class="card-title">Training</h2>
                        <p class="card-text">first paragraph</p>
                        <p class="card-text">second paragraph</p>
                    </div>
                    <div class="tab-pane fade" id="training" 
    role="tabpanel" aria-labelledby="training-tab">
                        <h2 class="card-title">Training 
    Opportunities</h2>
                        <p class="card-text">training 1</p>
                        <p class="card-text">training 2</p>
                    </div>
                </div>
            </div>







训练
第一段
第二段
训练
机会
培训1

培训2

谢谢！我永远也找不到那个放错地方的“