如何让引导选项卡在引导程序 3.3.x 中工作

How do I get bootstrap tabs-left to work in bootstrap 3.3.x

本文关键字：引导程序 工作 选项      更新时间：2023-09-26

我注意到左侧的导航选项卡在 Bootstrap 3.3.0、3.3.2 中不起作用，如果有人知道如何重新启用该样式，就会徘徊。选项卡应上下运行，内容选择在右侧。

工作引导程序2.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>

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

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

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

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

默认样式对于选项卡效果不佳，但对于药丸效果正常。

相关文章：