Bootstrap 标签导航的布局

默认情况下，标签的位于顶部。为了灵活控制标签的位置，Bootstrap额外提供了 3 个类，分别是 .tabs-left、.tabs-right、.tabs-below，它们分别让标签位于左侧、右侧、底部，可以根据需要选择使用。

如果希望标签在左侧，只需为 .tabbable 容器追加 .tabs-left 类即可。如：

1. <div class="tabbables tabs-left">
2. ...
3. </div>

效果如图 4‑26所示：

图4-26 Bootstrap标签导航标签在左侧

当然，也可以让标签在右侧，内容在左侧，只需将 .tabbable 容器的 .tabs-left 类换成 . tabs-right 类就行了。如：

1. <div class="tabbables tabs-right">
2. ...
3. </div>

效果如图 4‑27所示：

图4-27 Bootstrap标签导航标签在右侧

如果让标签在内容的下面，除了要为 .tabbable 容器添加 .tabs-below 类，还要将 .tab-content 和 .nav-tabs 的位置互换。如：

1. <div class="tabbable tabs-below">
2.   <div class="tab-content">
3.     <div class="tab-pane active" id="A">
4.       <p>I'm in Section A.</p>
5.     </div>
6.     <div class="tab-pane" id="B">
7.       <p>Howdy, I'm in Section B.</p>
8.     </div>
9.     <div class="tab-pane" id="C">
10.       <p>What up girl, this is Section C.</p>
11.     </div>
12.   </div>
13.   <ul class="nav nav-tabs">
14.     <li class="active"><a href="#A" data-toggle="tab">Section 1</a></li>
15.     <li><a href="#B" data-toggle="tab">Section 2</a></li>
16.     <li><a href="#C" data-toggle="tab">Section 3</a></li>
17.   </ul>
18. </div>

效果如图 4‑28所示：

图4-28 Bootstrap标签导航标签在底部

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。