ブートストラップ4カードナビゲーション

Question

ブートストラップ4ベータ版では、カードコンポーネントにナビゲーションを追加できます。 https://getbootstrap.com/docs/4.0/components/card/#navigation

しかし、カード内のさまざまなタブを切り替える方法は実際にはありません。

たとえば、これは私のためには機能しません。私もjavascriptファイルを追加しました。

<div class="card"> 
    <div class="card-header"> 
     <ul class="nav nav-tabs card-header-tabs"> 
      <li class="nav-item"> 
       <a class="nav-link active" href="#foo">Foo</a> 
      </li> 
      <li class="nav-item"> 
       <a class="nav-link" href="#bar">Bar</a> 
      </li> 
     </ul> 
    </div> 
    <div class="card-body"> 
     <div class="tab-content"> 
      <div class="tab-pane" id="foo">FOO</div> 
      <div class="tab-pane" id="bar">BAR</div> 
     </div> 
    </div> 
</div> 

Answer 1

この

<div class="card "> 
    <div class="card-header"> 
    <ul class="nav nav-tabs card-header-tabs pull-right" id="myTab" role="tablist"> 
     <li class="nav-item"> 
     <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a> 
     </li> 
     <li class="nav-item"> 
     <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a> 
     </li> 
     <li class="nav-item"> 
     <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a> 
     </li> 
    </ul> 
    </div> 
    <div class="card-body"> 
    <div class="tab-content" id="myTabContent"> 
      <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div> 
    <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div> 
    <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div> 
     </div> 
    </div> 
</div> 

はそれについての詳細を学ぶようにhttps://getbootstrap.com/docs/4.0/components/navs/