web-dev-qa-db-ja.com

ボタングループごとに複数のドロップダウンメニューがありますか？

今、私はこれをインターフェースに出しています：

breaks between buttons

ただし、bolt、plus-circleとgearギャップはありません。 Bootstrap Components docs：

任意のボタンを使用して、.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つがクリックされたときにすべてが起動します。

twitter-bootstrapdrop-down-menutwitter-bootstrap-3
24
digitalextremist

これは可能です。各ドロップダウンボタンを別の.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

ドキュメント

44
zessx