看看下面的 fiddle
http://jsfiddle.net/pouya314/bzdK5/
<div class="list-group">
<a href="#" class="list-group-item">
<i class="fa fa-angle-right fa-2x pull-right"></i>
item1
<!-- Single button -->
<span class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Action <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>
</span>
</a>
<a href="#" class="list-group-item">
<i class="fa fa-angle-right fa-2x pull-right"></i>
item2
</a>
</div>
<span class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Action <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>
</span>
当我将下拉按钮放在列表组“内部”时,它停止下拉!然而,就其本身而言(请注意列表下方下拉的完全相同的按钮)它按预期工作。
我不知道为什么以及如何绕过它。
最佳答案
您必须删除 <a>
列表中的元素。
看看:http://jsfiddle.net/bzdK5/3/
<div class="list-group">
<li href="#" class="list-group-item"> <i class="fa fa-angle-right pull-right"></i>
items1 <span class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Action <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>
</span>
</li> <a href="#" class="list-group-item">
<i class="fa fa-angle-right pull-right"></i>
item2
</a>
</div>
关于javascript - 推特 Bootstrap : Button dropdowns and list group,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21261154/