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

现在我在界面上看到：

但是在带

螺栓的按钮

、

加圆圈

和

齿轮

之间，我希望没有间隙。根据Bootstrap Components文档中的这条评论，我有这些差距，因为它似乎是强制性的：

通过将下拉菜单放置在.btn组中并提供正确的菜单标记，可以使用任意按钮触发下拉菜单。 因此，目前存在差距，因为按钮的布局格式为：

<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>

...


...

---

每个按钮组是否可以有多个下拉列表？ 如果是的话，我会怎么做？目前看来，我似乎可以将单个按钮放在下拉菜单的前面，但不能将多个下拉菜单放在前面

---

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

这是可能的，您必须将每个下拉按钮包装在另一个

.btn组

div中（不使用

.btn toolbar

）：

---

空格可能是由每个按钮组周围的DIV造成的。不过，我对你问题的第2部分不太清楚。谢谢你在这里发布的bootply和代码。这很好地解决了我的问题。我非常感激，太棒了！工作起来很有魅力（+1）这个解决方案的问题是下拉事件在IE中似乎不起作用。谢谢，我面临的问题是下拉列表飞到了最左边，而不是停留在它下面。这对我有帮助。

<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>