list-group-item 中的可点击按钮或字形图标答案

【问题标题】：Clickable button or glyphicon within list-group-itemlist-group-item 中的可点击按钮或字形图标
【发布时间】：2015-01-21 13:19:43
【问题描述】：

现在我正在尝试在列表组项中插入一个字形图标或按钮。我想要的是，当用户单击列表组项中的任何位置时，它们会链接到某个页面，但是当他们单击字形图标或按钮时，它们会链接到另一个页面。为什么我尝试这样做，它总是将字形图标或按钮放在列表组项目框之外。为什么是这样？我该如何解决这个问题？

非常感谢。

代码：

<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>

【问题讨论】：

标签： twitter-bootstrap href glyphicons

【解决方案1】：

给你：

<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;
}

小提琴：http://jsfiddle.net/9r14uuLw/

【讨论】：

【解决方案2】：

请原谅简洁（在工作中/被抨击）：

这就是我将在我的其余项目中使用的内容...

<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>

这是我项目中的工作代码——对于粗略的复制/粘贴，我们深表歉意！较低的<h5> 仅用于垂直对齐。添加到div.list-group-item 的row 类将占据整个容器宽度（可选）。

#caveat：

不是整个高度都可以作为链接操作，但这可能是一个不错的折衷方案。

希望这会有所帮助！

【讨论】：

【解决方案3】：

听起来您希望整个 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>

这应该接近你所追求的。我刚刚添加了一些内联样式来快速向您展示它是如何完成的，但是您可能想要想出一些更通用的样式来轻松地重用它。

【讨论】：