web-dev-qa-db-fra.com

Plusieurs menus déroulants par groupe de boutons?

En ce moment, j'ai cette sortie sur l'interface:

breaks between buttons

Mais entre les boutons avec le bolt, plus-circle et gear Je ne voudrais pas d'espace. J'ai des lacunes car il semble que ce soit obligatoire, d'après ce commentaire dans la documentation Bootstrap Components:

Utilisez n'importe quel bouton pour déclencher un menu déroulant en le plaçant dans un groupe .btn et en fournissant le balisage de menu approprié.

Donc, en ce moment, l'écart est là parce que les boutons sont disposés avec un format de:

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

Est-il possible d'avoir plus d'une liste déroulante par groupe de boutons?

Si oui, comment ferais-je cela? En l'état, il semble que je puisse placer des boutons individuels avant un menu déroulant, mais pas plusieurs menus déroulants.

Si je mets plusieurs menus déroulants dans le même groupe de boutons, ils se déclenchent tous lorsqu'un clic est effectué.

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

C'est possible, vous devez envelopper chaque bouton déroulant dans un autre .btn-group div (sans utiliser .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

44
zessx