将字形图标按钮添加到列表组项的一侧

Question

给定标准引导列表组项：

<div class="list-group-item list-group-item-action flex-column align-items-start">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small class="text-muted">3 days ago</small>
</div>
<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
<small class="text-muted">Donec id elit non mi porta.</small>
</div>

添加删除图标以位于列表组项内的右侧的最佳方法是什么？ 浮点型破坏了div 的样式。 这是我想添加的按钮：

<button type="button" class="btn btn-danger btn-lg"><span class='glyphicon glyphicon-remove'></span></button>

我是引导的新手，我尝试在列表组项内制作列，但结果也很差。

Answer 1

这段使用 span 的代码对我有用，尽管我不喜欢图标与标题垂直位置相关联，即使在此用例中这并不重要。

<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<span class="pull-right">
<span class="btn btn-lrg btn-danger" onclick="">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</span>
</span>
<small class="text-muted">3 days ago</small>
</div>
<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
<small class="text-muted">Donec id elit non mi porta.</small>
</div>

Answer 2

使用 css 属性：

display: inline-block

它将解决问题。