Các tab xếp chồng trong Bootstrap 3

Tôi đang cố gắng triển khai các tab xếp chồng liên kết bên trái bằng cách sử dụng plugin Tab jquery trong Bootstrap 3 nơi các tab được hiển thị theo chiều dọc ở bên trái của nội dung tab, thay vì ở trên cùng. Khi tôi thử như sau;

   <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>

Các tab được xếp chồng lên nhau, nhưng không được hiển thị chính xác khi được quay sang trái, thay vào đó chúng chỉ là các tab nằm ngang được dán chồng lên nhau. Nội dung tab được hiển thị / ẩn chính xác trong div nội dung.

Điều này đã được xử lý trong Bootstrap 2.x bằng cách sử dụng các lớp tab bên trái và bên phải tab , nhưng điều này không được chấp nhận trong Bootstrap 3 và dường như không thực sự được thay thế bằng bất cứ điều gì. Có ai biết liệu có thể hiển thị tab bên trái thích hợp trong plugin Bootstrap 3 không?

Các tab Trái, Phải và Dưới đã bị xóa khỏi Bootstrap 3, nhưng bạn có thể thêm CSS tùy chỉnh để đạt được điều này ..

.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;
}

Ví dụ hoạt động: http://bootply.com/74926

CẬP NHẬT

Nếu bạn không cần giao diện chính xác của tab (được viền phù hợp ở bên trái hoặc bên phải khi mỗi tab được kích hoạt), bạn có thể sử dụng đơn giản nav-stacked, cùng với Bootstrap col-*để di chuyển các tab sang trái hoặc phải ...

nav-stackedbản demo: 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>

Nhóm Bootstrap dường như đã loại bỏ nó. Xem tại đây: https://github.com/twbs/bootstrap/issues/8922 . Câu trả lời của @ Skelly liên quan đến css tùy chỉnh mà tôi không muốn làm vì vậy tôi đã sử dụng hệ thống lưới và thuốc điều hướng. Nó hoạt động tốt và nhìn tuyệt vời. Mã trông giống như vậy:

<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>

Bạn có thể thấy điều này trong hành động ở đây: http://bootply.com/81948

[Cập nhật] @SeanK cung cấp tùy chọn không phải bật các viên thuốc điều hướng thông qua Javascript và thay vào đó sử dụng data-toggle="pill". Kiểm tra nó ở đây: http://bootply.com/96067 . Cảm ơn Sean.

Để nhận các tab trái và phải (bây giờ cũng có hỗ trợ sang một bên) cho Bootstrap 3, thành phần tab bootstrap-vertical-tab có thể được sử dụng.

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

Bạn không cần phải thêm lại điều này. Điều này đã được gỡ bỏ có chủ đích. Tài liệu đã thay đổi phần nào và lớp CSS cần thiết ("nav-stacked") chỉ được đề cập dưới thành phần thuốc, nhưng cũng hoạt động cho các tab.

Hướng dẫn này chỉ ra cách sử dụng đúng thiết lập Bootstrap 3 để thực hiện các tab dọc:
tutsme-webdesign.info/bootstrap-3-toggable-tabs-and-pills