bootstrap 3：对齐列表中的徽章

Question

我有一个带有这样徽章的列表：

<ul class="list-group ticketView">
    <li class="list-group-item ticketView">
        <span class="badge pull-left">dkf</span>
        skdjflksdf
    </li>...

以下是这样的：

我知道我可以使用js计算每个徽章的正确填充，但我想知道bootstrap是否有办法对齐徽章和文本以使它们均匀（如两列）。

编辑--- 根据webeno，这非常简单：

span.badge.pull-left {
    margin-right: 10px;
    width: 100px;
}

只要我确保文字不长，这就完美无缺。

Answer 1

我相信这可以通过使用表而不是列表项来实现，并将.list-group-item的显示属性设置为inherit（默认情况下使用display:block）。

因此，在您的自定义CSS文件中，您可以添加以下内容：

.list-group-item
{
    display:inherit
}

您的表格结构可能如下所示：

<div class="col-md-3">
<table class="list-group ticketView">
    <tbody><tr class="list-group-item ticketView">
      <td class="badge pull-left">dkdsdcf</td>
      <td>skd</td>
      <td>ef</td>
      <td>wef</td>
      <td>ejflksdf</td>
    </tr>
    <tr class="list-group-item ticketView">
      <td class="badge pull-left">dk</td>
      <td>skdssd</td>
      <td>efasdasd</td>
      <td>wefdasdasdasd</td>
      <td>ejff</td>
    </tr>
    <tr class="list-group-item ticketView">
      <td class="badge pull-left">dkfsdsdcsdcs</td>
      <td>d</td>
      <td>ef</td>
      <td>w</td>
      <td>ejfasasdasdadf</td>
    </tr>
</tbody></table>
</div>

<强> Bootply demo here

Answer 2

请检查以下解决方案，

<ul class="list-group ticketView">
<li class="list-group-item ticketView">
    <span class="badge pull-left">dkf</span>
     <span class="title">skdjflksdf</span>

</li>
<li class="list-group-item ticketView">
    <span class="badge pull-left">aaaaa</span>
     <span class="title">aaa</span>
</li>

    ul
    {
        list-style-type: none;
        padding: 0;
        margin: 0;
        text-align: right;
    }

JSFiddle for test

Answer 3

您可以使用CSS规则并修改HTML：

HTML：

<ul class="list-group ticketView">
    <li class="list-group-item ticketView">
        <span class="badge pull-left">dkf</span>
        <span class="badge-title">skdjflksdf</span>
    </li>...

CSS：

.ist-group li { clear:both; display:block; }
.ist-group li span.badge {float: left;}
.ist-group li span.badge-title {float: right;}

我还没有测试过这段代码，只是看看它们是如何做的。

Answer 4

这有效！

<ul dir="rtl" class="list-group">
<li class="list-group-item"><span class="badge pull-left">New</span>List Group item 1 with badge</li>
</ul>

Answer 5

“编辑---根据webeno，这非常简单”......

span.badge.pull-left {
 margin-right: 10px;
 width: 100px;
 }

这对我有用。它更容易直观地理解，所以我创建了一个屏幕截图比较了3种方法：老式表，常规列表组（问题）和使用“左拉”技术的列表组由webeno描述。 [http://i.stack.imgur.com/l4PBp.jpg]

希望这对遇到麻烦的人有所帮助。