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

Question

我正在使用引导程序来显示左侧选项卡，如果我可以在选项卡下显示内容会很好。

我的 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您可以在 nav-tabs 底部添加另一个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>

这是一个演示

如果您想自定义选项卡下内容的外观，请使用“特殊”CSS 类，正如您将在演示中看到的那样。