탐색 창의 레이아웃이 잘못되었습니다

Question

Bootstrap 4에 탐색 창을 만들었습니다. sm보다 작은 화면의 경우 탐색 패널이 가로 방향이 아니라 세로 방향으로 표시됩니다. 그것은 작동하지만 탭의 내용이 모든 탭 제목 뒤에 표시됩니다 (아래 그림 참조). 어떻게 탭을 클릭에 해당 탭의 내용이 아래에 표시되고 다음 나머지 탭의 제목은 내가 prints 탭

을 향하기 전에 보여 Lorem Ipsum personal 원하는

표시되도록 레이아웃을 변경할 수 다음

당신이보기를위한 카드 구성 요소를 사용할 수있는 코드

<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="#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="#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="#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

입니다.

문서를 확인하십시오. here.