Bootstrap 4'te bu işlevi aşağıdaki biçimlendirme ile elde edebilirsiniz.
(built-in pasajı izleyici css @media sorguları dahil bazen şeyleri karıştırır gibi, benim de bir Codepen oluşturduk.)
HTML
<div class="container">
<ul id="tabs" class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a id="tab-A" href="#pane-A" class="nav-link active" data-toggle="tab" role="tab">–A–</a>
</li>
<li class="nav-item">
<a id="tab-B" href="#pane-B" class="nav-link" data-toggle="tab" role="tab">–B–</a>
</li>
<li class="nav-item">
<a id="tab-C" href="#pane-C" class="nav-link" data-toggle="tab" role="tab">–C–</a>
</li>
</ul>
<div id="content" class="tab-content" role="tablist">
<div id="pane-A" class="card tab-pane fade show active" role="tabpanel" aria-labelledby="tab-A">
<div class="card-header" role="tab" id="heading-A">
<h5 class="mb-0">
<a data-toggle="collapse" href="#collapse-A" data-parent="#content" aria-expanded="true" aria-controls="collapse-A">
Collapsible Group Item A
</a>
</h5>
</div>
<div id="collapse-A" class="collapse show" role="tabpanel" aria-labelledby="heading-A">
<div class="card-body">
[Tab content A]
</div>
</div>
</div>
<div id="pane-B" class="card tab-pane fade" role="tabpanel" aria-labelledby="tab-B">
<div class="card-header" role="tab" id="heading-B">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" href="#collapse-B" data-parent="#content" aria-expanded="false" aria-controls="collapse-B">
Collapsible Group Item B
</a>
</h5>
</div>
<div id="collapse-B" class="collapse" role="tabpanel" aria-labelledby="heading-B">
<div class="card-body">
[Tab content B]
</div>
</div>
</div>
<div id="pane-C" class="card tab-pane fade" role="tabpanel" aria-labelledby="tab-C">
<div class="card-header" role="tab" id="heading-C">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" href="#collapse-C" data-parent="#content" aria-expanded="false" aria-controls="collapse-C">
Collapsible Group Item C
</a>
</h5>
</div>
<div id="collapse-C" class="collapse" role="tabpanel" aria-labelledby="heading-C">
<div class="card-body">
[Tab content C]
</div>
</div>
</div>
</div>
</div>
CSS
.nav-tabs {
display:none;
}
@media(min-width:768px) {
.nav-tabs {
display: flex;
}
.card {
border: none;
}
.card .card-header {
display:none;
}
.card .collapse{
display:block;
}
}
@media(max-width:767px){
.tab-pane {
display: block !important;
opacity: 1;
}
}
koymak kod - bağlantınız SO tarafından engellenir. – furas