徽章怎么放到heading的旁边，默认的在最右 -慕课网

                        课程
                    
                        /前端开发
                        
                            /Bootstrap
                        
                        /玩转Bootstrap（基础）

徽章怎么放到heading的旁边，默认的在最右

西西西西月

2014-11-03

源自：玩转Bootstrap（基础） 7-22

关注问题我要回答

1275

操作

收起

8 回答

慕少安
2018-06-29

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

0 回复有任何疑惑可以回复我~

收起回答

姜素源3788549
2016-12-02

只需要把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;}

1 回复有任何疑惑可以回复我~

收起回答

阳少兮_s
2015-07-29

代码如下

<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>