现在我在界面上出来了
但是在带螺栓的按钮之间,加上圆圈和齿轮,我想没有差距.我在这里有差距,因为它似乎是强制性的,根据Bootstrap Components文档中的这个注释：
Use any button to trigger a dropdown menu by placing it within a .btn-group and providing the proper menu markup.
所以,现在的差距在于,因为这些按钮的格局是：
<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-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>