Bootstrap4의 탐색 창에 올바른 내용이 표시되지 않습니다.

Question

다음 코드에서 내가 선택한 탭과 관계없이 Lorem Ipsum events 만 표시됩니다. 실수는 무엇입니까?

<div class="container-fluid"> 
    <ul class="nav nav-tabs flex-column flex-sm-row" role="tablist"> 
     <li class="nav-item"> 
      <a class="nav-link active" id="events-tab" data-toggle="tab" href="#services-events" role="tab" aria-controls="events" aria-selected="true"> Events</a> 
     </li> 

     <li class="nav-item"> 
      <a class="nav-link" id="personal-tab" data-toggle="tab" href="#services-personal" role="tab" aria-controls="personal" aria-selected="false"> Personal</a> 
     </li> 

     <li class="nav-item"> 
      <a class="nav-link" id="prints-tab" data-toggle="tab" href="#services-prints" role="tab" aria-controls="prints" aria-selected="false"> Prints</a> 
     </li> 

    </ul> 
    <div class="tab-content" id="myTabContent"> 
     <div class="tab-pane fade show active" id="events" role="tabpanel" aria-labelledby="events-tab"> 
      <div class="container"> 
       <div class="row"> 
        <p> Lorem Ipsum events </p> 
       </div> 
      </div> 
     </div> 

     <div class="tab-pane fade" id="personal" role="tabpanel" aria-labelledby="personal-tab"> 
      <div class="container"> 
       <div class="row"> 
        <p> Lorem Ipsum personal </p> 
       </div> 
      </div> 
     </div> 

     <div class="tab-pane fade" id="prints" role="tabpanel" aria-labelledby="prints-tab"> 
      <div class="container"> 
       <div class="row"> 
        <p> Lorem Ipsum prints</p> 
       </div> 
      </div> 
     </div> 

    </div> 
</div> 

Answer 1

당신은 탭 패널의 id의 참조하기 위해 href의 변경해야합니다.

예 : href #personal은 개인용 탭 (ID가 personal 인)을 토글합니다.