Css 如何使用bootstrap 4在折叠菜单后面获取徽章？

随着从引导程序3迁移到引导程序4，项目不再排列。我已经在整个互联网上搜索了一个解决方案，但我现在没有选择了（还有耐心..哈哈）

这就是它现在的样子：

我想把徽章放在正文的右边

代码如下：

<div className="list-group">
<a href="#Expamle" data-toggle="collapse" className="list-group-item list-group-item-action flex-column">Example
        <span className="badge badge-default badge-pill">3</span></a>

<div id="Expamle" className="collapse">
    <div className="d-flex w-100 justify-content-between">
        <label className="list-group-item list-group-item-action flex-column">Example list-item-1</label>
    </div>
    <div className="d-flex w-100 justify-content-between">
        <label className="list-group-item list-group-item-action flex-column">Example list-item-2</label>
    </div>
    <div className="d-flex w-100 justify-content-between">
        <label className="list-group-item list-group-item-action flex-column">Example list-item-3</label>
    </div>
</div>

示例列表-item-1
示例列表-item-2
示例列表-项目3

---

请帮忙

您的代码按预期工作

示例列表-item-1
示例列表-item-2
示例列表-项目3

以下是它的代码：

<div className="list-group">
    <a href="#Expamle" data-toggle="collapse" className="list-group-item list-group-item-action flex-column">Example
        <span class="badge">5</span></a>

    <div id="Expamle" className="collapse">
        <div className="d-flex w-100 justify-content-between">
            <label className="list-group-item list-group-item-action flex-column">Example list-item-1</label>
        </div>
        <div className="d-flex w-100 justify-content-between">
            <label className="list-group-item list-group-item-action flex-column">Example list-item-2</label>
        </div>
        <div className="d-flex w-100 justify-content-between">
            <label className="list-group-item list-group-item-action flex-column">Example list-item-3</label>
        </div>
    </div>

示例列表-item-1
示例列表-item-2
示例列表-项目3

---

你说的“落后”是什么意思？你的意思是在课文的右边吗？可能与您的自定义css的东西，默认情况下，它看起来正常工作。我也没有在新文档中看到

badge default

或

badge pill

@ZimSystem位于右侧，如示例（3）@RickSibley，这就是我感到沮丧的原因，因为我找不到问题所在，而且一切似乎都很好。由于bootstrap主题，几乎没有定制css，但我会检查一下。这也可能与此代码被一个文件包有关吗？您发布的代码不会重新处理此问题。你能清理它吗？列表组项被设置为flex，但是删除flex列就可以了。谢谢您的解释，我也将更改徽章默认值@马里奥：不客气。但是您不需要将它设置为flex，这是在引导主题中默认设置的，但是我禁用了它。使用主题并不总是那么容易：）再次感谢。