Bootstrap span徽章拉/浮动权不起作用

Question

我有以下代码部分，我试图将徽章放在list-item的最右边部分，但不管怎么说它始终保持在文本的旁边（style =“float：right; “/ class =”pull-righ“/ class =”float-righ“）

<div class="row" style="margin-top: 30px;">

            <div class="col-2">

                <ul class="list-group">
                    <li class="list-group-item active"><h4>Groups</h4></li>
                    @foreach($project->groups()->get() as $key=>$group)
                        <li class="list-group-item list-group-item-action" id="{{$group->name}}">{{$group->name}}<span class="badge badge-default pull-right"> {{$group->jobs()->count()}}</span></li>


                    @endforeach

                </ul>

            </div>


        </div>

DEMO：https://jsfiddle.net/v4udh4Lc/7/