引导选项卡显示在顶部，即使在正确使用选项卡后也是如此

Bootstrap tabs showing on top even after using tabs-right

本文关键字：选项 显示 顶部      更新时间：2023-09-26

我试图在右边创建一个简单的导航栏，在左边创建一个窗格。就像他们在文档中显示的那样（右侧的选项卡部分）。

但标签只在顶部。这是JsFiddle演示

我做错什么了吗？tabs-right在新版本的引导程序中是否已弃用？

您使用的引导程序版本是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/

相关文章：