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

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

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

<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 类。