将 Bootstrap 标签与列表中的文本对齐

Question

如何将标签的右侧与文本的左侧对齐（所附图片显示了问题所在）使其看起来像这样：

superlongtagname | text1
  shortertagname | text2
     tinytagname | text3

这是我现在的样子：

这是我的模板代码（遍历 Django 对象列表）：

<ul>
    <li>
        <span class="badge bg-{{ t.get_color_display }}">
          {{ t.name }}
        </span>
        {{ rn.entry_text }}
    </li>
</ul>

我尝试了对齐实用程序 (align-end)、浮动（在 li 和 span 上）等，但似乎没有任何效果。

更新
在 @Michael H 的帮助下，我能够完成这项工作。我试图避开桌子，但在摆弄了一段时间后，还不错。

Answer 1

我会使用 table 而不是 <ul> 标签：

    <table class="table table-borderless">
      <tbody>
        <tr>
          <td class="text-end">
            <span class="badge bg-success">
              added
            </span>
          </td>
          <td class="w-100">Added something</td>
        </tr>
        <!--Other items-->
      </tbody>
    </table>

Here's my jsFiddle

结果将如下所示：

将 Bootstrap 标签与列表中的文本对齐

Align Bootstrap Tags with Text in List

django

text-align

bootstrap-5