2017-12-15 120 views

Trả lời

7

Trong Bootstrap 4, bạn có thể đạt được chức năng đó với đánh dấu sau.
(Như được xây dựng trong đoạn xem trộn lên những thứ đôi khi truy vấn css @media tham gia, tôi đã tạo ra một Codepen quá.)

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; 
    } 
} 
+0

Chà, đó chính xác là những gì tôi cần. Cảm ơn người đàn ông! –

+0

Rất vui được trợ giúp! Vui lòng, nếu câu trả lời này hoặc bất kỳ câu trả lời nào khác trên trang web đã giải quyết được vấn đề của bạn, hãy đánh dấu nó là đã được chấp nhận. Cảm ơn! – dferenc

Các vấn đề liên quan