徽章不会向右移动 Bootstrap 4

Question

我的家庭作业是使用BOOTSTRAP4设计了一个table的内容，学习使用https://getbootstrap.com/docs/4.6/components/list-group/ 但是徽章并没有像它说的那样向右移动，它只坚持内容

<ul class="list-group">
            <h2 class="list-group-item-heading">
             INTRO
            </h2>
            <br>
            <li class="list-group-item">
                content
                <span class="badge">1</span>
            </li>
            <li class="list-group-item">
                   content
                <span class="badge">3</span>
            </li>
            <li class="list-group-item">
                  content
                <span class="badge">4</span>
            </li>
            <li class="list-group-item">
                   content
                <span class="badge">9</span>
            </li>
            <li class="list-group-item">
                   content
                <span class="badge">9</span>
            </li>
        </ul>

Answer 1

如官方文档所述，将 d-flex justify-content-between 添加到 <li> 元素。这是添加类.

后的代码

<ul class="list-group">
    <h2 class="list-group-item-heading">
        INTRO
    </h2>
    <br>
    <li class="list-group-item d-flex justify-content-between align-items-center">
        content
        <span class="badge">1</span>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
        content
        <span class="badge">3</span>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
        content
        <span class="badge">4</span>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
        content
        <span class="badge">9</span>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
        content
        <span class="badge">9</span>
    </li>
</ul>

徽章不会向右移动 Bootstrap 4

Badge doesn't move right Boostrap 4

html

css

bootstrap-4