每个按钮组有多个下拉菜单?

时间:2014-02-12 20:48:28

标签: twitter-bootstrap drop-down-menu twitter-bootstrap-3

现在我在界面上发布了这个:

breaks between buttons

但在包含boltplus-circlegear的按钮之间,我希望没有差距。我在那里有差距因为看起来它是强制性的,根据Bootstrap组件文档中的这个评论:

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

所以,现在差距就在那里,因为按钮的布局格式为:

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

每个按钮组可以有多个下拉列表吗?

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

如果我在同一个按钮组中放置了多个下拉菜单,那么当点击一个按钮组时,它们都会触发。

1 个答案:

答案 0 :(得分:41)

这是可能的,您必须将每个下拉按钮包装在另一个.btn-group div中(不使用.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