javascript - 即使在使用 tabs-right 之后，Bootstrap 选项卡仍显示在顶部

Question

我正在尝试在右侧创建一个简单的导航栏，在左侧创建一个 Pane 。就像他们在 documentation 中展示的那样(部分 - 右侧的选项卡)。

但是标签只出现在顶部。这是 JsFiddle demo

我做错了什么吗？ tabs-right 是否在新版本的 bootstrap 中被弃用？

Answer 1

您使用的 Bootstrap 版本是 Bootstrap v3.3.5。

您所指的文档是 Bootstrap v2.0.0。

使用正确的版本，因为您的代码是正确的。

片段

@import url("https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="tabbable tabs-right">
  <ul class="nav nav-tabs">
    <li class="active"><a href="#rA" data-toggle="tab">Section 1</a></li>
    <li class=""><a href="#rB" data-toggle="tab">Section 2</a></li>
    <li class=""><a href="#rC" data-toggle="tab">Section 3</a></li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="rA">
      <p>I'm in Section A.</p>
    </div>
    <div class="tab-pane" id="rB">
      <p>Howdy, I'm in Section B.</p>
    </div>
    <div class="tab-pane" id="rC">
      <p>What up girl, this is Section C.</p>
    </div>
  </div>
</div>

fiddle :http://jsfiddle.net/b6zvmfmr/1/