Tab Tertumpuk di Bootstrap 3

Saya mencoba menerapkan tab bertumpuk kiri menggunakan plugin Tab jquery di Bootstrap 3 di mana tab diberikan secara vertikal di sebelah kiri konten tab, daripada di atas. Ketika saya mencoba yang berikut ini;

   <ul class="nav nav-tabs nav-stacked">
        <li><a href="#tab1" data-toggle="tab">Tab 1</a></li>
        <li><a href="#tab2" data-toggle="tab">Tab 2</a></li>
        <li><a href="#tab3" data-toggle="tab">Tab 3</a></li>
    </ul>


    <div class="tab-content">
        <div class="tab-pane fade" id="tab1">
            Tab 1 content
        </div>
        <div class="tab-pane fade" id="tab2">
            Tab 2 content              
        </div>
        <div class="tab-pane fade" id="tab3">
            Tab 3 content
        </div>
    </div>

Tab ditumpuk di atas satu sama lain, tetapi tidak diterjemahkan dengan benar karena dibelokkan ke kiri, melainkan tab hanya horisontal yang terjebak di atas satu sama lain. Konten tab ditampilkan dengan benar / disembunyikan di div konten.

Ini ditangani di Bootstrap 2.x menggunakan kelas tab-kiri dan tab-kanan , tetapi ini sudah usang di Bootstrap 3 dan sepertinya tidak benar-benar diganti dengan apa pun. Adakah yang tahu kalau rendering tab kanan-kiri yang tepat dimungkinkan di plugin Bootstrap 3 Tab?

Tab Kiri, Kanan dan Bawah dihapus dari Bootstrap 3, tetapi Anda dapat menambahkan CSS khusus untuk mencapai ini ..

.tabs-below > .nav-tabs,
.tabs-right > .nav-tabs,
.tabs-left > .nav-tabs {
  border-bottom: 0;
}

.tab-content > .tab-pane,
.pill-content > .pill-pane {
  display: none;
}

.tab-content > .active,
.pill-content > .active {
  display: block;
}

.tabs-below > .nav-tabs {
  border-top: 1px solid #ddd;
}

.tabs-below > .nav-tabs > li {
  margin-top: -1px;
  margin-bottom: 0;
}

.tabs-below > .nav-tabs > li > a {
  -webkit-border-radius: 0 0 4px 4px;
     -moz-border-radius: 0 0 4px 4px;
          border-radius: 0 0 4px 4px;
}

.tabs-below > .nav-tabs > li > a:hover,
.tabs-below > .nav-tabs > li > a:focus {
  border-top-color: #ddd;
  border-bottom-color: transparent;
}

.tabs-below > .nav-tabs > .active > a,
.tabs-below > .nav-tabs > .active > a:hover,
.tabs-below > .nav-tabs > .active > a:focus {
  border-color: transparent #ddd #ddd #ddd;
}

.tabs-left > .nav-tabs > li,
.tabs-right > .nav-tabs > li {
  float: none;
}

.tabs-left > .nav-tabs > li > a,
.tabs-right > .nav-tabs > li > a {
  min-width: 74px;
  margin-right: 0;
  margin-bottom: 3px;
}

.tabs-left > .nav-tabs {
  float: left;
  margin-right: 19px;
  border-right: 1px solid #ddd;
}

.tabs-left > .nav-tabs > li > a {
  margin-right: -1px;
  -webkit-border-radius: 4px 0 0 4px;
     -moz-border-radius: 4px 0 0 4px;
          border-radius: 4px 0 0 4px;
}

.tabs-left > .nav-tabs > li > a:hover,
.tabs-left > .nav-tabs > li > a:focus {
  border-color: #eeeeee #dddddd #eeeeee #eeeeee;
}

.tabs-left > .nav-tabs .active > a,
.tabs-left > .nav-tabs .active > a:hover,
.tabs-left > .nav-tabs .active > a:focus {
  border-color: #ddd transparent #ddd #ddd;
  *border-right-color: #ffffff;
}

.tabs-right > .nav-tabs {
  float: right;
  margin-left: 19px;
  border-left: 1px solid #ddd;
}

.tabs-right > .nav-tabs > li > a {
  margin-left: -1px;
  -webkit-border-radius: 0 4px 4px 0;
     -moz-border-radius: 0 4px 4px 0;
          border-radius: 0 4px 4px 0;
}

.tabs-right > .nav-tabs > li > a:hover,
.tabs-right > .nav-tabs > li > a:focus {
  border-color: #eeeeee #eeeeee #eeeeee #dddddd;
}

.tabs-right > .nav-tabs .active > a,
.tabs-right > .nav-tabs .active > a:hover,
.tabs-right > .nav-tabs .active > a:focus {
  border-color: #ddd #ddd #ddd transparent;
  *border-left-color: #ffffff;
}

Contoh kerja: http://bootply.com/74926

MEMPERBARUI

Jika Anda tidak memerlukan tampilan tab yang tepat (berbatasan tepat di kiri atau kanan saat masing-masing tab diaktifkan), Anda dapat menggunakan sederhana nav-stacked, bersama dengan Bootstrap col-*untuk melayang tab ke kiri atau kanan ...

nav-stackeddemo: http://codeply.com/go/rv3Cvr0lZ4

<ul class="nav nav-pills nav-stacked col-md-3">
    <li><a href="#a" data-toggle="tab">1</a></li>
    <li><a href="#b" data-toggle="tab">2</a></li>
    <li><a href="#c" data-toggle="tab">3</a></li>
</ul>

Tim Bootstrap tampaknya telah menghapusnya. Lihat di sini: https://github.com/twbs/bootstrap/issues/8922 . @ Skelly menjawab melibatkan custom css yang tidak ingin saya lakukan jadi saya menggunakan sistem grid dan nav-pills. Itu bekerja dengan baik dan tampak hebat. Kodenya seperti ini:

<div class="row">

  <!-- Navigation Buttons -->
  <div class="col-md-3">
    <ul class="nav nav-pills nav-stacked" id="myTabs">
      <li class="active"><a href="#home" data-toggle="pill">Home</a></li>
      <li><a href="#profile" data-toggle="pill">Profile</a></li>
      <li><a href="#messages" data-toggle="pill">Messages</a></li>
    </ul>
  </div>

  <!-- Content -->
  <div class="col-md-9">
    <div class="tab-content">
      <div class="tab-pane active" id="home">Home</div>
      <div class="tab-pane" id="profile">Profile</div>
      <div class="tab-pane" id="messages">Messages</div>
    </div>
  </div>

</div>

Anda dapat melihat ini dalam aksi di sini: http://bootply.com/81948

[Perbarui] @SeanK memberikan opsi untuk tidak harus mengaktifkan pil nav melalui Javascript dan sebagai gantinya menggunakan data-toggle="pill". Lihat di sini: http://bootply.com/96067 . Terima kasih, Sean.

Untuk mendapatkan tab kiri dan kanan (sekarang juga dengan samping) dukungan untuk Bootstrap 3, komponen bootstrap-vertical-tabs dapat digunakan.

https://github.com/dbtek/bootstrap-vertical-tabs

Anda seharusnya tidak perlu menambahkan ini kembali. Ini telah dihapus dengan sengaja. Dokumentasi telah sedikit berubah dan kelas CSS yang diperlukan ("nav-stacked") hanya disebutkan di bawah komponen pil, tetapi harus bekerja untuk tab juga.

Tutorial ini menunjukkan cara menggunakan pengaturan Bootstrap 3 dengan benar untuk melakukan tab vertikal:
tutsme-webdesign.info/bootstrap-3-toggable-tabs-and-pills