javascript - 如何让 bootstrap tabs-left 在 bootstrap 3.3.x 中工作

Question

我注意到 nav-tabs left 在 Bootstrap 3.3.0,3.3.2 中不起作用，并且正在徘徊是否有人知道如何重新启用该样式。选项卡应上下运行，并在右侧选择内容。

工作 bootstrap2.3.2 BIN:

http://jsbin.com/vimekuloqo/4/edit

这是无效的 3.3.0 链接:

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

相关代码(直接来自http://getbootstrap.com/2.3.2/components.html#navs)

          <ul class="nav nav-tabs">
            <li class="active"><a href="#lA" data-toggle="tab">Section 1</a></li>
            <li class=""><a href="#lB" data-toggle="tab">Section 2</a></li>
            <li class=""><a href="#lC" data-toggle="tab">Section 3</a></li>
          </ul>

          <div class="tab-content">
            <div class="tab-pane active" id="lA">
              <p>I'm in Section A.</p>
            </div>
            <div class="tab-pane" id="lB">
              <p>Howdy, I'm in Section B.</p>
            </div>
            <div class="tab-pane" id="lC">
              <p>What up girl, this is Section C.</p>
            </div>
          </div>
        </div>

...

<script language=javascript>
$('#myTab a').click(function (e) {
    if($(this).parent('li').hasClass('active')){
        $( $(this).attr('href') ).hide();
    }
    else {
        e.preventDefault();
        $(this).tab('show');
    }
});
</script>

Answer 1

本文以代码和演示的方式在页面下方提供了完整的答案:http://tutsme-webdesign.info/bootstrap-3-toggable-tabs-and-pills/

简单的答案是您需要将 .nav-stacked 添加到 <ul>然后使用普通的行/列系统进行布局。 BS3 本身不支持像 BS2 那样自行 float 选项卡。

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

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

默认样式对于选项卡效果不是很好，但对于药丸效果很好。