bootstrap如何给.list

阅读：评论：0

bootstrap如何给.list

在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=".3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"><script src=".2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script><script src=".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>

参考：

转载于:.html

本文发布于:2024-02-01 18:43:46，感谢您对本站的认可！

本文链接：https://www.4u4v.net/it/170678422838685.html

上一篇：判断语句if，逻辑运算符and、or

下一篇：正则表达式实现且逻辑运算

标签：bootstrap list

留言与评论（共有 0 条评论）