twitter-bootstrap 每个按钮组有多个下拉菜单？

Multiple drop-down menus per button group?

提问by digitalextremist

Right now I have this coming out on the interface:

现在我在界面上出现了这个：

But between the buttons with the bolt, plus-circleand gearI would like no gap. I have the gaps there because it seems like it is mandatory, per this comment in the Bootstrap Components docs:

但与按键之间bolt，plus-circle和gear我想没有间隙。我在那里有差距，因为它似乎是强制性的，根据 Bootstrap Components 文档中的这个评论：

Use any button to trigger a dropdown menu by placing it within a .btn-group and providing the proper menu markup.

使用任何按钮触发下拉菜单，方法是将其放置在 .btn-group 中并提供正确的菜单标记。

So, right now the gap is there because the buttons are laid out with a format of:

所以，现在差距就在那里，因为按钮的布局格式如下：

<div class="btn-toolbar" role="toolbar">
    <div class="btn-group btn-group-sm">
        <button type="button" title="Focusing" ... >
            <span class='fa fa-bolt '></span>
        </button>
    </div>
    <div class="btn-group btn-group-sm">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#">
            <span class='fa fa-plus-circle '></span>
            <span class='fa fa-caret-down '></span>
        </button>
        <ul class="dropdown-menu" role="menu">
            ...
        </ul>
    </div>
    <div class="btn-group btn-group-sm">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#">
            <span class='fa fa-gear '></span>
            <span class='fa fa-caret-down '></span>
        </button>
        <ul class="dropdown-menu" role="menu">
            ...
        </ul>
    </div>
</div>

---

---

Is it possible to have more than one drop-down per button group?

每个按钮组可以有多个下拉菜单吗？

If so, how would I do that? As it stands, it seems like I can place individual buttons ahead of a drop-down menu, but not multiple drop-down menus.

如果是这样，我该怎么做？就目前而言，我似乎可以在下拉菜单之前放置​​单个按钮，但不能在多个下拉菜单之前放置​​。

If I put multiple drop-down menus in the same button group, they all fire when one is clicked.

如果我将多个下拉菜单放在同一个按钮组中，它们都会在单击一个时触发。

回答by zessx

This is possible, you must wrap each dropdown button in another .btn-groupdiv (without using .btn-toolbar) :

这是可能的，您必须将每个下拉按钮包装在另一个.btn-groupdiv 中（不使用.btn-toolbar）：

<div class="btn-group">

  <button type="button" class="btn btn-default">
    <i class="glyphicon glyphicon-flash"></i>
  </button>

  <div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
      <i class="glyphicon glyphicon-plus-sign"></i> <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="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 class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
      <i class="glyphicon glyphicon-cog"></i> <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="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>

Bootply

引导

Documentation

文档