Javascript 为什么我的Bootstrap 4.6药片和标签不能正常工作？

我使用Bootstrap4.6标准导航选项卡，使用pills作为导航。第二个药片正确地显示了它的相关标签，但是当我尝试返回到第一个标签时，它不再工作了。我已经看过文件了。一定很简单

我的HTML：

<div class="row pt-5">
<div class="col-md-3 col-12 areaMenu">
  <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
    <div class="row">
      <a class="nav-link active btn-secondary btn-lg btn-block rounded-0 col-6 col-md-12" id="v-pills-activacion-tab" data-toggle="pill" href="#v-pills-activacion" role="tab" aria-controls="v-pills-activacion" aria-selected="true">Activación</a>
      <a class="nav-link btn-secondary btn-lg btn-block rounded-0 mt-0 col-6 col-md-12" id="v-pills-programados-tab" data-toggle="pill" href="#v-pills-programados" role="tab" aria-controls="v-pills-programados" aria-selected="false">Programados</a>
    </div>
  </div>
</div>
<div class="col-md-8 col-12 areaContenido">
  <div class="tab-content" id="v-pills-tabContent">
    <div class="tab-pane fade show active" id="v-pills-activacion" role="tabpanel" aria-labelledby="v-pills-activacion-tab">
      <h1>Activación</h1>
    </div>
    <div class="tab-pane fade" id="v-pills-programados" role="tabpanel" aria-labelledby="v-pills-programados-tab">
      <span class="float-left font-weight-normal">
        <h5>Elija una fecha</h5>
      </span>
    </div>
  </div>
</div>

Activación
伊莱贾·乌纳·费查

为了让它工作，我必须在ul元件内重新分配导航药丸。Bootstrap文档没有提到必须这样做。

如果您发布了一个实际的解决方案，可能还有一个JSFIDLE或stackblitz，这会有所帮助