twitter-bootstrap 列表组项中的可点击按钮或字形
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27094505/
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
Clickable button or glyphicon within list-group-item
提问by steve-o
Right now I am trying to insert a glyphicon or button within a list-group-item. What I want is that when the user clicks anywhere within the list-group-item, they are linked to a certain page, but when they click the glyphicon or button, they link to another page. Why I try to do this, it keeps putting the glyphicon or button outside of the list-group-items box. Why is this? How can I fix this?
现在我正在尝试在列表组项中插入字形或按钮。我想要的是，当用户单击列表组项中的任何位置时，它们会链接到某个页面，但是当他们单击字形或按钮时，它们会链接到另一个页面。为什么我尝试这样做，它一直将字形或按钮放在列表组项目框之外。为什么是这样？我怎样才能解决这个问题？
Much appreciated.
非常感激。
Code:
代码：
<div class="list-group">
<a href="my_django_url" class="list-group-item">
<a href="another_django_url"><span class="glyphicon some-glyphicon"></span></a>
</a>
回答by ncosta
here you go:
干得好：
<div class="list-group">
<li class="list-group-item">
<a href="my_django_url">
first link
</a>
<a href="another_django_url" class="icon">
<span class="glyphicon glyphicon glyphicon-search"></span>
</a>
</li>
</div>
.icon {
float: right;
}
fiddle: http://jsfiddle.net/9r14uuLw/
回答by Cody
Pardon the brevity (at work / slammed):
请原谅我的简短（在工作/猛烈抨击）：
This is what I'll be going with for the rest of my project(s)...
这就是我将在我的项目的其余部分中使用的内容......
<div class="list-group-item row" ng-repeat="item in list.items">
<a class="col-xs-6 col-sm-8 col-md-10 col-lg-10 pull-left" href="#/lists/{{list.id}}/items/{{item.id}}"><h5>{{item.name}} ({{item.quantity}})</h5></a>
<h5 class="col-xs-6 col-sm-4 col-md-2 col-lg-2 pull-right">
<a class="pull-left" href="#/lists/{{list.id}}/items/{{item.id}}/edit" ng-show="list.name !== 'all-deleted-items'"><u>Edit</u></a>
<a class="pull-right" href="" ng-click="removeItem(item, $event)" ng-show="list.name !== 'all-deleted-items'"><u>Remove Item</u></a>
</h5>
</div>
This is working code from my project -- apologies for the crude Copy/Paste! The lower <h5>is simply for vertical alignment. The rowclass added to div.list-group-itemis to take up full container width (optional).
这是我项目中的工作代码 - 为粗略的复制/粘贴道歉！较低<h5>的只是用于垂直对齐。row添加的类div.list-group-item是占用整个容器宽度（可选）。
#caveat:
＃警告：
Notthe entire height is actionable as a link, but this may be a decent compromise.
并非整个高度都可以作为链接进行操作，但这可能是一个不错的妥协。
Hope this helps!
希望这可以帮助！
回答by dvanderb
It sounds like you want the entire list-group-item to be a link, which is not accomplished by the answer provided. You can't have an <a>tag inside another <a>tag, so I think you need to use absolute positioning to accomplish what you are trying to do.
听起来您希望整个 list-group-item 成为一个链接，这不是通过提供的答案来完成的。你不能<a>在另一个标签内有一个<a>标签，所以我认为你需要使用绝对定位来完成你想要做的事情。
<div class="list-group-item" style="padding: 0;">
<a href="#" style="display: block; padding: 10px 15px;">test</a>
<a href="#" class="btn btn-sm btn-danger" style="position: absolute; top: 50%; right: 15px; margin-top: -15px;">hi</a>
</div>
That should be close to what you're after. I just added some inline styles to quickly show you how it can be done, but you'll probably want to come up with some more generic styles to re-use this easily.
那应该接近你所追求的。我刚刚添加了一些内联样式以快速向您展示如何完成它，但是您可能想要提出一些更通用的样式来轻松地重用它。
