javascript - Bootstrap 选项卡标题元素中的复杂 html

Question

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

考虑示例 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

您可以在标签页眉中使用所有内联元素，只需将它们包裹在一个 anchor 中，如下所示:

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

原因是面板标题的 bootstrap 样式放置在 anchor 上，如果您需要更复杂的结构，您可能需要更改 bootstrap 并将样式放置在 li 上。

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