bootstrap如何给.list-group加上序号
在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>
参考:
bootstrap如何给.list-group加上序号的更多相关文章
- 使用vue的v-for生成table , 给table加上序号
现在有一个使用mybatis的分页插件生成的table,table中数据是通过vue获得的 , 前台显示使用<tr v-for="item in items"> 后台v ...
- LigerUi中为Grid表加上序号,并调整适当宽度!(实例)
LigerUi中为Grid表加上序号,并调整适当宽度!(实例) dataAction: 'server', pageSize: 20, toolbar: {}, url: 'ndl ...
- DEDE文章列表加上序号效果
在文章列表上面加上序号列表的形式,使得文章列表表现得没那么单调,更加丰富一点. {dede:arclist orderby=pubdate type='commend.' titlelen='26' ...
- [转] BootStrap table增加一列显示序号
原文地址:https://blog.csdn.net/aboboo5200/article/details/78839208 最近由于项目需要,使用BootStrap table做数据展示,其中要在第 ...
- Bootstrap 组件之 List group
简介 List group 指列表.当然,Bootstrap 列表不局限于由 <ul> 和 <li> 标签构成的. Bootstrap 中一共三种列表的构成方式,这里 有一个例 ...
- 查询出结果 给其 加上序号的方法 msql
基本用法 SELECT @rownum := @rownum +1 AS rownum, e.*FROM (SELECT @rownum := 0) r , (select A.id,B.user_u ...
- 如何为datagridview加上序号
最简单的方法是在Datagridview的事件RowPostPaint事件下面添加如下代码即可 private void dataGridView1_RowPostPaint(object sende ...
- MySQL数据检索时,sql查询的结果如何加上序号
1.sql语法 @i:类型java定义的变量 @i:=0:这里类似给i初始化值为0 @i:=@i+1 :每次从0开始递增+1 SELECT (@i:=@i+1) as id,TDLINE FROM Y ...
- 旺财速啃H5框架之Bootstrap(五)
在上一篇<<旺财速啃H5框架之Bootstrap(四)>>做了基本的框架,<<旺财速啃H5框架之Bootstrap(二)>>篇里也大体认识了bootst ...
随机推荐
- html、css、javascript、JSP 、xml学习顺序应该是怎样的呢?
html==>css==>javascript==>jsp==>xml 1.先学习基本的HTML知识,了解大部分HTML标签的作用. 2.学习CSS,熟悉如何用CSS去控制HT ...
- Android:dimen尺寸资源文件的使用(转)
为了适配不同的分辨率. dimen.xml在values文件夹下面 <resources> <!-- Default screen margins, per the Android ...
- iOS开发资料链接
ios开发中文文档了 http://developer.apple.com/library/ios/#referencelibrary/GettingStarted/RoadMapiOSCh/chap ...
- (转载)RTorrent 命令行使用说明
转自:http://blog.chinaunix.net/uid-22457844-id-2973262.html 参考:http://forum.ubuntu.org.cn/viewtopic.ph ...
- CSS 基本1
HTML元素可以分为两种: 块级元素 内联元素(行内元素) 两者的区别在于以下三点: 块级元素会独占一行(即无法与其他元素显示在同一行内,除非你显示修改元素的 display 属性),而内联元素则都会 ...
- JAVA多线程实现的四种方式
Java多线程实现方式主要有四种:继承Thread类.实现Runnable接口.实现Callable接口通过FutureTask包装器来创建Thread线程.使用ExecutorService.Cal ...
- Android拓展系列(11)--打造Windows下便携的Android源码阅读环境
因为EXT和NTFS格式的差异,我一直对于windows下阅读Android源码感到不满. 前几天,想把最新的android5.0的源码下下来研究一下,而平时日常使用的又是windows环境,于是专门 ...
- HttpHandler与HttpModule的用处与区别
问题1:什么是HttpHandler? 问题2:什么是HttpModule? 问题3:什么时候应该使用HttpHandler什么时候使用HttpModule? 答案1:HttpHandler,Http ...
- 持续集成基础-Jenkins(二)-搭建Jenkins环境和配置第一个Job
安装方式一(直接启动): 1.下载最新的版本(一个 WAR 文件).Jenkins官方网址: http://Jenkins-ci.org/ 2.运行 java -jar jenkins.war(需要运 ...
- HTML图片元素(标记)
<html> <head> <title>第一个网页</title> </head> <body> ************** ...