jquery - ブートストラップ - 左側のタブでタブ可能でまったく機能しない

Question

タブがページの左側に垂直に積み重ねられ、ページの右側のコンテンツがタブで変化するタブ可能なタブを作成しようとしています。これが私のコードです：

<div class="tabbable tabs-left">
  <ul class="nav nav-tabs" data-tabs="tabs">
    <li class="active">
      <a href="#foodTab" data-toggle="tab">
    Food</a></li>
    <li class="">
      <a href="#toyTab" data-toggle="tab">
    Toy</a></li>
    <li class="">
      <a href="#clothesTab" data-toggle="tab">
    Clothes</a></li>
    <li class="">
      <a href="#booksTab" data-toggle="tab">
    Book</a></li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane fade active" id="foodTab">
      Oh my god it's the food tab! 
    </div>
    <div class="tab-pane fade" id="toyTab">
      Toy tab! 
    </div>
    <div class="tab-pane fade" id="clothesTab">
      clothing tab
    </div>
    <div class="tab-pane fade" id="booksTab">
      books books books
    </div>
  </div>
</div>

タブが表示されますが、すべてのコンテンツが非表示になり、タブをクリックするとアクティブなタブが変更されますが、右側は何も変更されません。jsfiddle を作成しようとしましたが、さらに悪いことに、誰かがこれを正しく行う方法を教えてくれるかもしれません: http://jsfiddle.net/ewRZZ/3/

最後に、html ヘッド内に次のファイルを次の順序でインクルードしています。

また、ページの上部に正しい DOCTYPE を指定したので、それが問題ではないことがわかりました。

ブートストラップ Web サイトから jquery コードをコピーして貼り付け、「#myTab a」を「#foodTab a」などに変更しようとしましたが、何も変わりませんでした。たぶん私はそれを間違っていましたか？

実際に、同じサイトの他のページで動作するタブを取得しました (スクリプトを含む同じコードを使用)。唯一の違いは、これらのタブが側面ではなく上部にあること<div class="tabbable"></div>です。もしかしてこれが何か関係あるの？ありがとう ：）