我有标准的导航选项卡,使用 Bootstrap 4.6 使用 Pill 作为导航。第二个药丸正确显示其相关选项卡,但是当我尝试返回第一个选项卡时,它不再起作用。我已阅读文档。它一定很简单。
我的 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>
最佳答案
为了使其工作,我必须在 ul 元素内重新分配导航丸。 Bootstrap 文档没有提到必须这样做。
关于javascript - 为什么我的 Bootstrap 4.6 药片和标签无法正常工作?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66019275/