html - 带有拆分按钮下拉菜单的 Bootstrap 选项卡

Question

我正在尝试实现与示例类似但带有拆分按钮下拉菜单的导航菜单:

“带下拉选项卡” http://twitter.github.io/bootstrap/components.html#navs

http://twitter.github.io/bootstrap/components.html#navbar

我可以有一个拆分按钮，或者我可以有一个带下拉菜单的选项卡，但我似乎无法将两者结合起来。这可能吗？

带有下拉菜单的标签:

<div class="">
    <ul class="nav nav-tabs">
        <li class="active"><a href="#">Home</a></li>
        <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#">Tab2 <b class="caret"></b></a>
            <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
            </ul>
        </li>
        <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#">Tab3<b class="caret"></b></a>
            <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
            </ul>
        </li>
    </ul>
</div>

拆分按钮:

<div class="btn-toolbar" style="margin: 0;">
          <div class="btn-group">
            <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
            <ul class="dropdown-menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li class="divider"></li>
              <li><a href="#">Separated link</a></li>
            </ul>
          </div>
</div>

Answer 1

所以您的最终结果应该是拆分按钮而不是下拉菜单，对吗？你试过这个吗？ (没测试过)

    <div>
        <ul class="nav nav-tabs">
            <li class="active">
                <button class="btn dropdown-toggle" data-toggle="dropdown">Home<span class="caret"></span></button>
                <ul class="dropdown-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li class="divider"></li>
                  <li><a href="#">Separated link</a></li>
                </ul>
            </li>
        </ul>
    </div>