bootstrap 选项卡 header 元素中的复杂 html

Question

我希望 bootstrap 在选项卡 header 按钮内显示多个元素，目前它分成多个按钮...

考虑示例 jsFiddle：

<ul class="nav nav-tabs">
    <li class="allmembers">
        <a href="#allmembers" data-toggle="tab">The first</a>
        <a href="#allmembers" data-toggle="tab">tab</a>
    </li>
    <li class="additional">
        <a href="#additional" data-toggle="tab">The second</a>
        <a href="#additional" data-toggle="tab">tab</a>
    </li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
    <div class="tab-pane active" id="allmembers">
        Content
        <p> <a href="javascript: ;" id="next">next</a></p>
    </div>                    

    <div class="tab-pane" id="additional">
        Content 2
    </div>
</div>

在上面的示例中，它会显示四个选项卡而不是两个，但我需要 bootstrap 才能呈现复杂的 html，例如：

<ul class="nav nav-tabs">
    <li class="all members">
        <div>
            Any type of content displayed inline here
            <a href="#allmembers" data-toggle="tab">The first</a>
            <a href="#allmembers" data-toggle="tab">tab</a>
        </div>
    </li>
    <li class="additional">
        <div>
            Any type of content displayed inline here
            <a href="#additional" data-toggle="tab">The second</a>
            <a href="#additional" data-toggle="tab">tab</a>
        </div>
    </li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
    <div class="tab-pane active" id="allmembers">
        Content
        <p> <a href="javascript: ;" id="next">next</a></p>
    </div>                    

    <div class="tab-pane" id="additional">
        Content 2
    </div>
</div>

怎么可能

Answer 1

您可以在选项卡内使用所有内联元素 header，只需将它们包裹在一个锚点内，如下所示：

<a href="#additional" data-toggle="tab">
    The second <br/>
    Any type of content displayed inline here <br/>
    <span>Span</span>
</a>

原因是面板 header 的 bootstrap 样式放置在锚点上，如果您需要更复杂的结构，您可能需要更改 bootstrap 并将样式放置在 li 代替。

您的演示：http://jsfiddle.net/zd1368yu/3/

bootstrap 选项卡 header 元素中的复杂 html

Complex html within bootstrap tab header element

html

javascript

css

jquery

twitter-bootstrap