在bootstrap中，我们可以使用不带任何class的<ol>跟<li>来创建一个有序列表，但是如果加上list-group类，样式有了，但列表前面的数字却没了。

Bootstrap给list-group-item应用了display:block; 所以显示不了序号，因此我们只要修改一下list item的display就能把序号找回来了

        .list-group{

            list-style: decimal inside;

        }

        .list-group-item{

            display: list-item;

        }

如果把list-style: decimal inside;写成list-style-type: decimal;，序号会显示在框外

以下附上一段测试代码及效果图：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Bootstrap list</title>

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    <style>

        .list-group{

            list-style: decimal inside;

        }

        .list-group-item{

            display: list-item;

        }

    </style>

</head>

<body>

<div class="container">

    <ul class="list-group">

        <li class="list-group-item">First</li>

        <li class="list-group-item">Second</li>

        <li class="list-group-item">Third</li>

    </ul>

    <!--Ordered list-->

    <ol>

        <li>First</li>

        <li>Second</li>

        <li>Third</li>

    </ol>

</div>

</body>

</html>

参考：

http://stackoverflow.com/questions/24230990/how-to-make-an-ordered-list-with-twitter-bootstrap-component

bootstrap如何给.list-group加上序号的更多相关文章

  1. 使用vue的v-for生成table , 给table加上序号

    现在有一个使用mybatis的分页插件生成的table,table中数据是通过vue获得的 , 前台显示使用<tr v-for="item in items"> 后台v ...

  2. LigerUi中为Grid表加上序号，并调整适当宽度！（实例）

    LigerUi中为Grid表加上序号,并调整适当宽度!(实例) dataAction: 'server', pageSize: 20, toolbar: {},           url: 'ndl ...

  3. DEDE文章列表加上序号效果

    在文章列表上面加上序号列表的形式,使得文章列表表现得没那么单调,更加丰富一点. {dede:arclist orderby=pubdate type='commend.' titlelen='26' ...

  4. [转] BootStrap table增加一列显示序号

    原文地址:https://blog.csdn.net/aboboo5200/article/details/78839208 最近由于项目需要,使用BootStrap table做数据展示,其中要在第 ...

  5. Bootstrap 组件之 List group

    简介 List group 指列表.当然,Bootstrap 列表不局限于由 <ul> 和 <li> 标签构成的. Bootstrap 中一共三种列表的构成方式,这里 有一个例 ...

  6. 查询出结果 给其 加上序号的方法 msql

    基本用法 SELECT @rownum := @rownum +1 AS rownum, e.*FROM (SELECT @rownum := 0) r , (select A.id,B.user_u ...

  7. 如何为datagridview加上序号

    最简单的方法是在Datagridview的事件RowPostPaint事件下面添加如下代码即可 private void dataGridView1_RowPostPaint(object sende ...

  8. MySQL数据检索时，sql查询的结果如何加上序号

    1.sql语法 @i:类型java定义的变量 @i:=0:这里类似给i初始化值为0 @i:=@i+1 :每次从0开始递增+1 SELECT (@i:=@i+1) as id,TDLINE FROM Y ...

  9. 旺财速啃H5框架之Bootstrap（五）

    在上一篇<<旺财速啃H5框架之Bootstrap(四)>>做了基本的框架,<<旺财速啃H5框架之Bootstrap(二)>>篇里也大体认识了bootst ...

随机推荐

  1. wp8 入门到精通 ImageCompress 图片压缩

    //实例化选择器 PhotoChooserTask photoChooserTask = new PhotoChooserTask(); BitmapImage bimg; int newPixelW ...

  2. wp8 入门到精通 Animation 背景加字体颜色从下向上变化颜色效果

    <phone:PhoneApplicationPage.Resources> <Style x:Key="ButtonStyle1" TargetType=&qu ...

  3. apistore接口调用demo

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. C#交互功能的演化

    (此文章同时发表在本人微信公众号“dotNET每日精华文章”,欢迎右边二维码来关注.) 题记:Miguel de Icaza在最近发表的一篇博文中畅谈了Mono及其相关产品中的C#交互特性的演化情况. ...

  5. Windows+Git+TortoiseGit+COPSSH 安装图文教程

    转自:http://blog.csdn.net/aaron_luchen/article/details/10498181 准备工作: 1. Git-1.8.1.2-preview20130201.e ...

  6. JDBC操作MySQL数据库案例

    JDBC操作MySQL数据库案例 import java.sql.Connection; import java.sql.DriverManager; import java.sql.Prepared ...

  7. css精灵动画

    精灵动画的实现 CSS Sprites在国内很多人叫CSS精灵,其实这个技术不新鲜,原理就是:靠不断的切换图片让人感觉视觉上不断在变化,例如gif动画之类的效果 那么前端如何实现精灵效果? 传统的就是 ...

  8. WinForm支持拖拽效果

    有一个MSDN客户提问在WinForm中如何实现拖拽效果——比如在WinForm中有一个Button,我要实现的效果是拖拽这个Button到目标位置后生成一个该控件的副本. 其实这个操作主要分成三步走 ...

  9. Swift3.0语言教程使用字符串创建和初始化字符串

    Swift3.0语言教程使用字符串创建和初始化字符串 Swift3.0语言教程使用字符串创建和初始化字符串,在编程语言中,字面值是很常见的数据描述形式.人们可以通过字面所表达的意思,获知其含义,尤其是 ...

  10. js运动框架tween

    <!DOCTYPE html> <html> <head> <title>myAnimate</title> <style> * ...