Twitter Bootsrap 3.0 - 製表符不再工作？

Question

我無法找到一個答案別處......

在引導2.x中，你可以使用JS標籤的功能，並使其顯示在左側用：

<div class="tabbable tabs-left"> <-- TABS-LEFT HERE!!! 

<ul class="nav nav-tabs" id="myTab"> 
    <li class="active"><a href="#home">Home</a></li> 
    <li><a href="#profile">Profile</a></li> 
    <li><a href="#messages">Messages</a></li> 
    <li><a href="#settings">Settings</a></li> 
</ul> 

<div class="tab-content"> 
    <div class="tab-pane active" id="home">...</div> 
    <div class="tab-pane" id="profile">...</div> 
    <div class="tab-pane" id="messages">...</div> 
    <div class="tab-pane" id="settings">...</div> 
</div> 

</div> 

但現在，功能似乎沒有在bootstrap 3.0中繼承，我在bootstrap網站上沒有看到它的任何文檔。有誰知道這是否被刪除？很難相信它會是...

謝謝你的幫助！

Answer 1

不幸的是，正如我也使用它們，似乎所有的non-default tab alignments已在3.0中刪除，沒有等效。

直接從上面的鏈接複製，所有三個選項卡比對從3.0去除：​​

• .tabs-left
• .tabs-right
• .tabs-below

Answer 2

這是我如何解決它。

<div class="tabbable tabs-left"> 
    <div class="row"> 
     <div class="col-md-4"> 
      <ul class="nav nav-pills nav-stacked"> 
       <li class="active"><a href="#location-tab" data-toggle="tab">Location</a></li> 
       <li><a href="#amenities-tab" data-toggle="tab">Amenities</a></li> 
       <li><a href="#photos-tab" data-toggle="tab">Photos</a></li> 
      </ul> 
     </div> 

     <div class="col-md-8"> 
    <div class="tab-content"> 
     <div class="tab-pane active in" id="location-tab"> 

Answer 3

本文提供了一個完整的答案與代碼和演示下該頁面的方法： http://tutsme-webdesign.info/bootstrap-3-toggable-tabs-and-pills/

答案很簡單，你需要添加.nav-stacked到，然後使用正常的行/列系統佈置它。 BS3本身不支持像BS2那樣自行懸浮標籤。

http://jsbin.com/kobegaguwa/1/edit

注意，對於jsbin預覽，你需要使用XS列或將響應堆在1列的一切。

默認樣式對選項卡不起作用，但對於藥丸可以正常工作。