在自定义列表组中使用徽章，css没有对该列表组中徽章设定右浮动效果，直接放到标题后即可

只需要把span元素放在h4里面就可以了，代码如下：

<h4 class="list-group-item-heading">Canvas绘图详解：<span class="badge">23</span></h4>

.badge的css样式不包括浮动，只有徽章放在类名为.list-group-item的父元素里时，才有浮动效果出现。即.list-group-item > .badge {float: right;} 

代码如下

<div class="list-group">
    <a href="javascript:;" class="list-group-item">
        <h4 class="list-group-item-header"> Canvas绘图详解<span class="badge">12</span></h4>
        <p>本课程为Canvas系列课程第二课。通过对《绚丽的倒计时效果的学习》，在大家对Canvas绘图有一定了解的基础上......</p>
    </a>
    <a href="javascript;:" class="list-group-item">
        <h4 class="list-group-item-header">玩转Bootstrap<span class="badge">30</span></h4>
        <p>Bootstrap框架式一个非常受欢迎的前端开发框架，他能让后端程序员和不懂设计的前端人员制作出有没的Web页面或Web应用程序。</p>
    </a>
    <a href="javascript:;" class="list-group-item">
        <h4 class="list-group-item-header">基于bootstrap的网页开发<span class="badge">5</h4>
        <p>Bootstrap是用于前端开发的工具包，提供了优雅的HTML和CSS贵发，并基于jQuery开发了丰富的Web组件。课程介绍了Bootstrap框架的基本知识，并基于Bootstrap框架...</p>
    </a>
</div>

发现两种方法：

1： 把<span>加一个.pull-right 类。<h4 class="list-group-item-heading">Canvas绘图详解<span class="badge pull-right">345</span></h4>

2： 把<span>放到<h4>前面。

<span class="badge">345</span><h4 class="list-group-item-heading">Canvas绘图详解</h4>

二楼正解。
<span class="badge pull-right">22</span>

<a href="##" class="list-group-item">

<h4 class="list-group-item-heading">

        Sass中国<p class="pull-right"><span class="badge">2</span></p></h4>

<p class="list-group-item-text">致力于为中国开发者提供最全面，最具影响力，最前沿的Sass相关技术与教程...</p>

4841行

.list-group-item > .badge {
    float: right;
}

无代码无真相……找找有没有为pull-right的class或者CSS文件里是否定义badge在最右