ナビゲーションペインのレイアウトが正しくない

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