使用徽章的Bootstrap列表：将图标放置在徽章右侧

Question

我有一个带有徽章的Twitter Bootstrap列表，并且我还添加了一个删除图标，目前我有两个问题：

• 徽章自动位于列表行的右侧，而我希望删除图标在徽章之后而不是之前（我认为这样看起来更好）。我想我需要重新定义徽章样式，但不知道如何做。
• 删除图标的垂直对齐不正确，我也没有找到解决方法。

HTML：

<div class="panel-body">
    <ul id="mylist" class="list-group">
        <li id="item1" href="#" class="list-group-item">Item1   <span id="badge" class="badge">5</span>
    <i class="fa fa-remove fa-2x pull-right" style="color: red;"></i>

        </li>
        <li id="item2" href="#" class="list-group-item">Item2   <span id="badge" class="badge">-10</span>
    <i class="fa fa-remove fa-2x pull-right" style="color: red;"></i>

        </li>
    </ul>
</div>

这里有一个 JSFiddle，其中包含我遇到的小问题的示例。需要帮助吗？

- Roman Rdgz

Answer 1

像 pull-right 这样的 Bootstrap 元素具有以下属性：

float : right

根据此属性，文档对象模型被反转。例如：

<span>First</span><i>Second</i>

会被显示为：（注意只是显示 - DOM 仍然相同。）

<i>Second</i><span>First</span>

您的解决方案是JSFiddle: http://jsfiddle.net/r77wkzcg/5/ (已更新)

在右对齐中，连接点为右侧。因此，DOM中的第一个元素优先附加到右侧。 在这里解释：http://jsfiddle.net/tpahadi/rrrr3wq3/1/

- tika

---

我试图简明扼要地表达。他使用了 span 和 i，这会使解释更好。 - tika

完美地工作。为了学习目的：为什么float: right会颠倒元素的顺序？乍一看毫无道理... - Roman Rdgz

@RomanRdgz 在 right 对齐中，连接点是right。因此，DOM中的第一个元素具有优先权，可以连接到右侧。http://jsfiddle.net/tpahadi/rrrr3wq3/1/ - tika

最后一个问题：为了垂直对齐徽章和图标，您修改了图标大小为18px。然而，如果我将其稍微放大一点（22px），它就无法再次对齐。有没有其他想法来对齐徽章和图标？ - Roman Rdgz

@RomanRdgz 您可以将 margin-top 更改为负值。http://jsfiddle.net/r77wkzcg/5/ 我建议使用相对单位 em，而不是 px，因为它们使其动态，如果您正在使其响应式。我只是举个例子，所以我使用了 px。不要坚持使用 px。 - user3581203

Answer 2

对于您的物品，请使用：

    <li id="item1" href="#" class="list-group-item">Item1
    <div class="pull-right">
    <span id="badge" class="badge" style="float:left;">5</span>
    <i class="fa fa-remove fa-2x"  style="color: red;"></i>
    </div>
    </li>

- Bass Jobsen

---

我喜欢这个定义，因为它更有序。 - Roman Rdgz

Answer 3

只需在徽章后放置图标，这取决于HTML元素的顺序：

<li id="item1" href="#" class="list-group-item">
    Item1   
    <span id="badge" class="badge">5</span> <!-- first -->
    <i class="fa fa-remove fa-2x pull-right" style="color: red;"></i>  <!-- second -->
</li>

关于删除图标的垂直居中，您可以通过使用负外边距将其向上移动来实现（虽然不太干净但却可行，只需使用精确选择器以避免覆盖所有Bootstrap元素）

请参见 this fiddle

- Freez

Answer 4

将 fa-remove 图标的 span 放在最前面。

<div class="panel-body">
    <ul id="mylist" class="list-group">
        <li id="item1" href="#" class="list-group-item">
            <i class="fa fa-remove fa-2x pull-right" style="color: red;"></i>Item1 <span id="badge" class="badge">5</span>
        </li>
        <li id="item2" href="#" class="list-group-item">
            <i class="fa fa-remove fa-2x pull-right" style="color: red;"></i>Item2 <span id="badge" class="badge">-10</span>
        </li>
    </ul>
</div>

http://bootply.com/8wySK2DPfw

- Carol Skelly