现在我正在尝试在list-group-item中插入glyphicon或按钮。我想要的是,当用户点击list-group-item中的任何位置时,它们会链接到某个页面,但是当他们单击glyphicon或按钮时,它们会链接到另一个页面。为什么我尝试这样做,它会继续将glyphicon或按钮放在list-group-items框之外。为什么是这样?我该如何解决这个问题?
非常感谢。
代码:
<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>
答案 0 :(得分:6)
你去:
<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;
}
答案 1 :(得分:3)
原谅简洁(在工作/抨击):
<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>
仅用于垂直对齐。添加到row
的{{1}}类占用整个容器宽度(可选)。
不整个高度可以作为链接起作用,但这可能是一个不错的妥协。
希望这有帮助!
答案 2 :(得分:1)
听起来您希望整个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>
这应该接近你所追求的。我刚刚添加了一些内联样式以快速向您展示如何完成它,但您可能想要提出一些更通用的样式来轻松地重复使用它。