twitter-bootstrap Twitter Bootstrap：按钮下拉菜单和列表组
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21261154/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter Bootstrap: Button dropdowns and list group
提问by Pouya
Take a look at the fiddle below
看看下面的小提琴
http://jsfiddle.net/pouya314/bzdK5/
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>
When I place a button dropdown "inside" a list group, it stops dropping down! Whereas, on its own (notice the exact same button drop down below the list) it works as expected.
当我在列表组“内部”放置一个按钮下拉菜单时，它会停止下拉！然而，就其本身而言（注意列表下方完全相同的按钮下拉菜单）它按预期工作。
I cannot figure out why and how to get around it.
我不知道为什么以及如何解决它。
回答by Oden
You must remove <a>element from list.
您必须<a>从列表中删除元素。
Take a look: http://jsfiddle.net/bzdK5/3/
看一看：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>
回答by Oden
if you are use "div" tag instead of "a" tag as per below code, it's work properly
如果您按照下面的代码使用“div”标签而不是“a”标签，它就可以正常工作
<div class="list-group">
<div 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>
</div>
<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>
