带徽章的Bootstrap列表:将图标右侧放置到徽章上

时间:2015-01-14 08:03:41

标签: html css twitter-bootstrap

我有一个带有徽章的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以我的情况为例。

任何帮助?

4 个答案:

答案 0 :(得分:4)

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/

答案 1 :(得分:1)

对于您的物品使用:

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

答案 2 :(得分:0)

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

答案 3 :(得分:0)

首先放置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