在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. 10g ASM下修改control file的位置

    1.查看位置以及name是否正确 SQL> sho parameter name NAME TYPE VALUE ------------------------------------ --- ...

  2. win7 快捷键

    F F1 显示辅助 F2 重命名选定项目 F3 搜索文件或文件夹 F4 在 Windows 资源管理器中显示地址栏列表 F5 刷新活动窗口 F6 在窗口中或桌面上循环切换屏幕元素 F10 激活活动程序 ...

  3. 注解：【有连接表的】Hibernate单向N->1关联

    Person与Address关联:单向N->1,[有连接表的] Person.java package org.crazyit.app.domain; import javax.persiste ...

  4. Chrome书签被篡改之后的恢复

    chrome书签和备份存放的路径:(XXXX为用户名)(AppData文件夹为隐藏文件夹) \Users\XXXX\AppData\Local\Google\Chrome\User Data\Defa ...

  5. 【转】Struts2国际化

    原文章:http://www.cnblogs.com/hellokitty1/p/5083663.html 简单理解     国际化简称i18n,其来源是英文单词 internationalizati ...

  6. mysql注入研究

    网址: http://www.jb51.net/article/14446.htm http://www.jb51.net/article/29445.htm

  7. 解决android expandablelistview 里面嵌入gridview行数据重复问题

    最近做了一个“csdn专家博客App” 当然了是android版本,在专家浏览页面,我才用了expandablelistview 组件来显示专家分类,每个分类点击之后可以显示专家的头像和名字. 很简单 ...

  8. js 事件监听

    addEventListener() 方法 element.addEventListener(event, function, useCapture); 第一个参数是事件的类型 (如 "cl ...

  9. ++i与i++的区别

    1. ++i 和 i++,在单独使用时,就是 i=i+1. 2. a = ++i,相当于 i=i+1; a = i; (先i = i + 1,再使用i的值).也可以写成 i++; a=i 3. a = ...

  10. css整理－05 边框,背景和浮动，定位

    边框 样式:border-style hidden, dotted, dashed, solid , double, groove, ridge, inset, outset 最不可预测的是doubl ...