如何在左侧引导选项卡下显示内容

Question

我正在使用bootstrap显示左侧标签，如果我可以在标签下显示内容，那就太好了。

我的HTML看起来像这样：

<div class="tabbable tabs-left">
    <ul class="nav nav-tabs">
        <li class="active"><a href="#">Tab 1</a></li>
        <li><a href="#">Tab 2</a></li>
        <li><a href="#">Tab 3</a></li>
        <li><a href="#">Tab 4</a></li>
    </ul>
    <div class="tab-content">
        Tab Content
    </div>
</div>

截图：

Answer 1

您可以在导航标签li的底部添加另一个ul：

<ul class="nav nav-tabs">
    <li class="active"><a href="#tab1" data-toggle="tab">Tab 1</a></li>
    <li><a href="#tab2" data-toggle="tab">Tab 2</a></li>
    <li><a href="#tab3" data-toggle="tab">Tab 3</a></li>
    <li><a href="#tab4" data-toggle="tab">Tab 4</a></li>
    <li class="special">Some something here. Show something here.</li>
 </ul>

Here's a demo

如果您想在标签下自定义内容的外观，请使用“特殊”CSS类，如您在演示中所见。