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

像pull-right这样的引导元素的属性为：

float : right

在此属性下，文档对象模型被反转。像：

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

将显示为:(注意仅显示为 - DOM仍然相同。）

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

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

在right对齐中，连接点为right。因此，DOM中的first element获得附加到right的优先级。在此处说明：http://jsfiddle.net/tpahadi/rrrr3wq3/1/

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>

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>

对于删除图标的垂直居中，您可以使用负边距顶部移动图标顶部（它不干净但它可以工作，只需使用精确的选择器以避免覆盖所有引导元素）

请参阅this fiddle

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列表：将图标右侧放置到徽章上

4 个答案: