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>

Here is a JSFiddle 以我的情况为例。

有什么帮助吗？

Answer 1

只需将图标放在徽章后面，这取决于 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

Answer 2

像 pull-right 这样的 bootstrap 元素有属性作为：

float : right

在此属性下，文档对象模型被颠倒了。喜欢：

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

将显示为：（注意仅显示为 - DOM 仍然相同。）

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

你的解决方案是 JSFiddle 是：http://jsfiddle.net/r77wkzcg/5/（更新）

In right Alignment, the point of connection is right. So, the first element in the DOM gets the priority to attach to the right. Explained here: http://jsfiddle.net/tpahadi/rrrr3wq3/1/

Answer 3

对于您的项目使用：

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

Answer 4

首先放置 fa-remove 图标范围..

<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

Bootstrap 带有徽章的列表：将图标放在徽章右侧

Bootstrap list with badges: put icon right to the badge

html

css

twitter-bootstrap