bootstrap 4/5 中 ul 和 ol 默认无列表符号，因 reboot.css 设为 list-style: none；需用自定义 class（如 .list-disc）并加 !important 恢复，或改用语义化容器。
Bootstrap 4/5 里 ul 和 ol 的样式为啥突然没了
因为 Bootstrap 默认对所有 ul、ol 应用了 list-style: none，目的是清空默认符号，方便做自定义菜单或卡片列表。这不是 bug，是设计选择——但如果你真需要原生圆点或数字序号，它就“丢”了。
常见错误现象：ul 里写了一堆 li，页面上却光秃秃没符号，检查 computed styles 发现 list-style 被覆盖成 none；或者用 class="list-unstyled" 后忘了还原，结果全站列表都失效。
- 只影响直接子元素：Bootstrap 的重置规则通常是
ul, ol { list-style: none; }，不会穿透到嵌套的ul ul - 优先级高：它在
reboot.css（Bootstrap 4+）或bootstrap-reboot.min.css里，属于早期加载的重置层，容易被忽略 - 和
list-unstyled冲突：这个工具类只是重复执行一遍list-style: none，不是“开关”，删掉它不等于恢复原样
手动恢复 list-style 的三种可靠写法
别碰 Bootstrap 源码，也不建议全局覆盖。最稳的方式是针对性加回样式，且注意 specificity 和作用域。
- 用内联
style快速验证：<ul style="list-style: disc;"></ul>—— 适合临时调试，但别上线 - 加自定义 class（推荐）：
<ul class="list-disc"></ul>，然后在自己的 CSS 里写.list-disc { list-style: disc !important; }；!important是必要的，否则干不过 reboot 的规则 - 利用 Bootstrap 5.3+ 新增的
list-style-type工具类（如list-style-type-disc），但注意它只在utilities/api.json启用后才生效，且需确认你用的是完整构建版
list-style 常见值和兼容性坑
不同浏览器对 list-style-type 的支持有温差，尤其在旧 Android WebView 或 IE11 里，“circle”“square” 看起来像默认圆点，“lower-greek” 可能直接退化成数字。
-
disc、circle、square：全平台安全，优先选它们 -
decimal、lower-alpha、upper-roman：现代浏览器 OK，但 iOS Safari 有时对hebrew或armenian渲染异常 - 慎用
list-style-image：路径相对定位易错，且不缩放、不响应式，background-image+padding-left更可控 - 别混用
list-style简写和单独属性：比如先写list-style: none，再单独设list-style-type: disc，后者会被前者覆盖
嵌套列表里符号消失的真正原因
不是 Bootstrap “丢了”样式，而是它的 list-unstyled 类会递归清除所有后代 ul/ol 的符号，包括你手动加的子列表。
- 错误写法：
<ul class="list-unstyled"> <li>一级</li> <li><ul><li>二级</li></ul></li> </ul>→ 二级也没符号 - 正确做法：给子列表单独加回样式，比如
<ul class="list-unstyled"> <li>一级</li> <li><ul class="list-disc"><li>二级</li></ul></li> </ul> - 更干净的解法：避免在父级用
list-unstyled，改用margin和padding手动清空间距，保留list-style控制权
最常被忽略的一点：Bootstrap 的列表重置是“无差别”的，它不管你是不是导航、是不是表单辅助文本。所以恢复样式时，得想清楚——你到底要的是语义化的列表（该有符号），还是纯视觉的布局容器（不该有）。前者加 list-style，后者该用 div + display: flex。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
