在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. C和C++混合编程(__cplusplus 与 external "c" 的使用)

    转自:http://blog.csdn.net/ljfth/article/details/3965871 第一种理解比如说你用C++开发了一个DLL库,为了能够让C语言也能够调用你的DLL输出(Ex ...

  2. JQuery初探

    [TOC] jquery 通过jQuery,您可以选取(查询,query)HTML元素,并对它们执行"操作"(actions). jQuery 使用的语法是 XPath 与 CSS ...

  3. ios编码转换 国标 UTF-8

    我们知道,使用NSURLConnection的代理方法下载网页,存到一个NSData中, NSMutableData *pageData; [pageData appendData:data]; 如果 ...

  4. c++11 正则表达式基本使用

    c++ 11 正则表达式 常用的方法 regex_match regex_search regex_replace 等. regex_match 要求正则表达式必须与模式串完全匹配,例如: strin ...

  5. 关于转换大写中文金额-新学的java函数整理

    toCharArray public char[] toCharArray() 将此字符串转换为一个新的字符数组. 返回: 一个新分配的字符数组,它的长度是此字符串的长度,而且内容被初始化为包含此字符 ...

  6. 在CentOS中快速安装PHP，MySQL，Nginx和phpMyAdmin

    安装环境 yum install -y autoconf automake gcc gcc-c++ git libtool make nasm pkgconfig zlib-devel vim 安装p ...

  7. HDU 3926 图的同构

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3926 题意:给定2个顶点度最大为2的无向图.问你这2个无向图是否同构. 思路: 1.最大度为2.说明这 ...

  8. React组件

    React组件 组件是React中的基本单位,在每个组件里面又封装了程序逻辑,通过reader标出界面片段或者回传一段描述,组件再通过React.renderComponent将组件展示在浏览器中.每 ...

  9. ural 2073. Log Files

    2073. Log Files Time limit: 1.0 secondMemory limit: 64 MB Nikolay has decided to become the best pro ...

  10. C++可能出错的小细节

    1. for(list<Geometry_line>::iterator it = G.begin(); it != G.end();) { if(IsLineCrossed(*it, l ...