Twitter Bootsrap 3.0 - tabs-left 不再工作了？答案

【问题标题】：Twitter Bootsrap 3.0 - tabs-left not working anymore?Twitter Bootsrap 3.0 - tabs-left 不再工作了？
【发布时间】：2013-08-27 00:39:06
【问题描述】：

我在其他地方找不到这个问题的答案...

在 bootstrap 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 网站上没有看到任何文档。有谁知道这是否被删除？很难相信会是……

感谢您的帮助！

【问题讨论】：

是的，这已在 3.. 中删除。在此处查看答案：stackoverflow.com/questions/18432577/…

标签： html twitter-bootstrap

【解决方案1】：

不幸的是，当我也使用它们时，似乎所有 non-default tab alignments 在 3.0 中都已被删除，没有等效项。

直接从上面的链接复制，所有三个标签对齐方式都从 3.0 中删除：

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

【讨论】：

【解决方案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">

【讨论】：

【解决方案3】：

本文提供了完整的答案，其中包含代码并在页面下方演示了一种方式： http://tutsme-webdesign.info/bootstrap-3-toggable-tabs-and-pills/

简单的答案是您需要将.nav-stacked 添加到，然后使用正常的行/列系统进行布局。 BS3 本身并不支持像 BS2 那样自行浮动标签。

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

请注意，对于 jsbin 预览，您需要使用 xs 列，否则它将响应式地将所有内容堆叠在 1 列中。

默认样式不适用于标签，但适用于药丸。

【讨论】：