tabs - Bootstrap 4 Tab 到 Accordion。如何？

Question

我用谷歌搜索并找到了如何在此处响应式将 Bootstrap 3 选项卡制作为 Accordion Bootstrap 3 tab to accordion ，但我正在使用 Bootstrap 4，但我不知道如何将其转换为 Bootstrap 4 选项卡到 Accordion 。请帮我。

谢谢!

Answer 1

我希望回答 Bootstrap 5 还为时不晚用户
我正在使用 Bootstrap 5这是我的解决方案，无需额外编写JS code

<!-- HTML part -->
<!-- nav/tab links -->
<ul class="nav nav-pills nav-fill" id="tab" role="tablist">
  <li class="nav-item border mx-1 rounded">
    <a class="nav-link active" href="#pane-A" id="tab-A" data-bs-toggle="tab" role="tab">Tab A</a>
  </li>
  <li class="nav-item border mx-1 rounded">
    <a class="nav-link" href="#pane-B" id="tab-B" data-bs-toggle="tab" role="tab">Tab B</a>
  </li>
  <li class="nav-item border mx-1 rounded">
    <a class="nav-link" href="#pane-C" id="tab-C" data-bs-toggle="tab" role="tab">Tab C</a>
  </li>
</ul>
<!-- nav/tab links ends -->

<!-- nav/tab -->
<div id="content" class="tab-content" role="tablist">
  <div id="pane-A" class="tab-pane fade show active" role="tabpanel" aria-labelledby="tab-A">
    <div class="border rounded p-2" role="tab" id="heading-A">
      <h5 class="mb-0">
        <a data-bs-toggle="collapse" href="#collapse-A" aria-expanded="true" aria-controls="collapse-A">
          Collapsible Group Item A
        </a>
      </h5>
    </div>
    <div id="collapse-A" class="collapse show" data-bs-parent="#content" role="tabpanel"
      aria-labelledby="heading-A">
      <div class="card-body">
        [Tab content A]
      </div>
    </div>
  </div>

  <div id="pane-B" class="tab-pane fade" role="tabpanel" aria-labelledby="tab-B">
    <div class="border rounded p-2" role="tab" id="heading-B">
      <h5 class="mb-0">
        <a class="collapsed" data-bs-toggle="collapse" href="#collapse-B" aria-expanded="false"
          aria-controls="collapse-B">
          Collapsible Group Item B
        </a>
      </h5>
    </div>
    <div id="collapse-B" class="collapse" data-bs-parent="#content" role="tabpanel"
      aria-labelledby="heading-B">
      <div class="card-body">
        [Tab content B]
      </div>
    </div>
  </div>

  <div id="pane-C" class="tab-pane fade" role="tabpanel" aria-labelledby="tab-C">
    <div class="border rounded p-2" role="tab" id="heading-C">
      <h5 class="mb-0">
        <a class="collapsed" data-bs-toggle="collapse" href="#collapse-C" aria-expanded="false"
          aria-controls="collapse-C">
          Collapsible Group Item C
        </a>
      </h5>
    </div>
    <div id="collapse-C" class="collapse" role="tabpanel" data-bs-parent="#content"
      aria-labelledby="heading-C">
      <div class="card-body">
        [Tab content C]
      </div>
    </div>
  </div>
</div>
<!-- nav/tab ends -->

这里是我的样式文件内容

.nav-pills {
    display:none;
}

@media(min-width:768px) {
    .nav-pills {
        display: flex;
    }
    .tab-pane .border {
        display:none;
    }  
    .tab-pane .collapse{
        display:block;
    }
}

@media(max-width:767px){
    .tab-content > .tab-pane {
        display: block !important;
        opacity: 1;
    }
}

如果您希望它与平板电脑 View 一起使用，您可以更改参数