应使用 list-style: none 彻底去掉圆点，因圆点源于浏览器原生渲染而非 bootstrap；list-unstyled 虽可去圆点，但同时清除 padding-left 和 margin，影响布局。
用 list-style 彻底去掉圆点
Bootstrap 本身不会给普通 <ul></ul> 或 <ol></ol> 强加额外的列表样式，它的默认行为完全继承自浏览器。所以“有圆点”不是 Bootstrap 加的，而是浏览器对 <ul></ul> 的原生渲染。要去掉，直接覆盖 CSS 即可：
- 在对应列表或其父容器上设置
list-style: none - 如果只影响某几个列表，推荐加自定义 class（比如
no-bullets），避免全局污染 - 注意：仅设
list-style: none不会影响<li>的块级布局或内边距，圆点消失后，<li>仍保持原有行高和间距
Bootstrap 5 中 list-unstyled 类的真正作用
Bootstrap 5 提供了内置工具类 list-unstyled，它确实能移除圆点，但不止于此：
- 它同时清除了
padding-left（对<ul></ul>）和margin-top/margin-bottom（对<li>） - 这意味着列表项会紧贴左边界、上下紧凑排列——如果你只需要去圆点但想保留原始缩进或间距，直接用
list-unstyled反而会破坏布局 - 常见误用：在导航菜单里套
<ul></ul>时盲目加list-unstyled，结果导致子菜单项挤在一起，难以点击
为什么有时 list-style: none 不生效？
最常踩的坑是选择器优先级或继承干扰：
- 检查是否被其他规则覆盖，比如某个父级组件（如
.card-body）设置了list-style: disc，且选择器权重更高 - Bootstrap 的
.list-group组件内部使用了list-style: none，但它只作用于自身结构；如果你把普通<ul></ul>塞进.list-group-item，圆点可能又冒出来——因为那是嵌套的<ul></ul>，未被重置 - 别忘了重置
list-style-type和list-style-image，某些旧项目可能用图片做标记，单设list-style: none才能一并清除
行内列表（.list-inline）要不要去圆点？
Bootstrap 的 .list-inline 类默认已包含 list-style: none，但它还做了两件事：
- 把
<li>设为display: inline-block，并加了margin-right: 0.5rem - 如果你只是想水平排列但保留圆点（极少见），就不能用
.list-inline，得自己写display: inline-flex或flex布局 - 注意：Bootstrap 5 中
.list-inline对<ol></ol>无效，只适配<ul></ul>；若需序号+横排，得手动配合counter-reset和伪元素
list-unstyled 带来的间距变化，比单纯“去圆点”更容易引发后续布局问题。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
