为什么我的 Bootstrap 4.6 药丸和标签无法正常工作？

Question

我使用 Bootstrap 4.6 使用药丸作为导航的标准导航选项卡。第二个药丸正确显示其相关选项卡，但是当我尝试返回第一个选项卡时，它不再起作用。我已经阅读了文档。一定很简单。

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

Answer 1

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