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

Question

我有一个 fiddle 正在尝试使用 Bootstrap 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>

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

编辑 2 我的问题是放错了</div>。我有两个 tab-pane 块，但第二个窗格在 tab-content 块之外。

Answer 1

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