每个按钮组有多个下拉菜单? [英] Multiple drop-down menus per button group?
问题描述
现在我在界面上出现:
但是在带有螺栓
的按钮之间,加圈
和齿轮
我希望没有差距。我在这里有差距,因为它似乎是强制性的,根据Bootstrap Components文档中的这个注释:
But between the buttons with the bolt
, plus-circle
and gear
I would like no gap. I have the gaps there because it seems like it is mandatory, per this comment in the Bootstrap Components docs:
使用任何按钮触发一个下拉菜单,将其放置在.btn组中,并提供正确的菜单标记。
Use any button to trigger a dropdown menu by placing it within a .btn-group and providing the proper menu markup.
所以,现在的差距在于,因为这些按钮的格局如下:
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>
有可能有多个drop-按钮组按钮?
如果是,我该怎么做?就好像我可以把一个按钮放在一个下拉菜单之前,而不是多个下拉菜单。
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.
推荐答案
这是可能的,你必须包装每个下拉按钮在另一个 .btn-group
div(不使用 .btn-toolbar
):
This is possible, you must wrap each dropdown button in another .btn-group
div (without using .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>
这篇关于每个按钮组有多个下拉菜单?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!