在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. 利用Browser Link提高前端开发的生产力

    (此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 题记:Browser Link是VS 2013开始引入的一个强大功能,让前端代码(比如Ang ...

  2. wpf textblock 会覆盖 button里面字体样式的解决方法 还有button的style覆盖。。datepicker里面的按钮的style

    .(button使用contont写的时候) 当.button使用 <button.content><textBlock/></button.content>依然会 ...

  3. windbg的高级玩法

    详见附件  jpg改zip

  4. KMP算法代码

    以下是本人根据上一篇博客随笔http://www.cnblogs.com/jiayouwyhit/p/3251832.html,所写的KMP算法代码(暂未优化),个人认为在基于上一篇博客的基础上,代码 ...

  5. C#经典机试题(猫叫)

    猫大叫一声,所有的老鼠都开始逃跑,主人被惊醒.(C#语言) 1.要有联动性,老鼠和主人的行为是被动的. 2.考虑可扩展性,猫的叫声可能引起其他联动效应. public interface Observ ...

  6. asp.net权限控制配置web.config

    项目下 有三个文件夹 A,B,C 验正方式是 Forms 验正 我要设置他们的访问权限为, A,匿名可访问 B,普通用户授权后才能访问 C,只允许管理员访问 <configuration> ...

  7. java的重载、覆盖和隐藏的区别

    重载:方法名相同,但参数不同的多个同名函数 注意:1.参数不同的意思是参数类型.参数个数.参数顺序至少有一个不同 2.返回值和异常以及访问修饰符,不能作为重载的条件(因为对于匿名调用,会出现歧义,eg ...

  8. AngularJS学习之全局API（应用程序编程接口）

    1.AngularJS全局API用于执行常见任务的Javascript函数集合: **比较对象 **迭代对象 **转换对象 2.全局API函数使用angularJS对象进行访问:以下是通用API函数: ...

  9. 彻底搞懂Html5本地存储技术（一）

    一.H5之前客户端本地存储的实现 1. cookies cookies的应用比较广泛,但有以下几个问题: (1)每次http请求头上会带着,浪费资源 (2)每个域名客户端只能存储4K大小 (3)会造成 ...

  10. Ubuntu12.04安装搜狗输入法失败后，出现登录界面循环

    前些天,因为复现别人实验就准备重新启用实验室的集群上的系统,上去安装了几个插件,之后又觉得需要中文输入法就试着装一下,结果安装失败,看到报错信息,也没放在心上,第二天启动时发现再也登录不进去. 现象描 ...