引导选项卡标题元素中的复杂 html

Complex html within bootstrap tab header element

本文关键字：复杂 html 元素 标题 选项      更新时间：2023-09-26

我希望引导程序在选项卡标题按钮内显示多个元素，目前它分为多个按钮......

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

在上面的例子中，它会显示四个选项卡而不是两个，但我需要引导程序才能呈现复杂的 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>

怎么能

您可以在选项卡标题中使用所有内联元素，只需将它们包装在锚点内，如下所示：

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

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

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

相关文章：