应使用 Bootstrap 5 官方类 list-unstyled 移除 ul/ol 默认圆点或数字，它同时清除 list-style、padding-left 和 margin；仅用 list-inline 不起作用，因其只改变排列方式而不影响标记。
如何移除 Bootstrap 5 中 ul 或 ol 的默认圆点/数字
Bootstrap 5 默认不自动清除列表项的标记（bullets / numbers），list-unstyled 才是官方提供的「去圆点」工具类。别误用 list-inline —— 它只改变排列方式，不碰标记。
常见错误：给 ul 加 list-inline 后发现圆点还在，以为类名写错或版本失效。其实它本就不负责隐藏标记。
-
list-unstyled：移除所有默认 margin、padding 和项目符号（list-style: none） -
list-inline：仅让li水平排列（display: inline-block），保留原样式 - 两者可同时使用：
class="list-unstyled list-inline"，先清样式再排布
list-inline 的真实作用和典型用法
list-inline 是纯布局类，核心目标是替代手写 display: inline-block 或 float: left 实现导航栏、标签云等横向排列场景。
它不会修改 ul 的语义或基础样式，所以：
- 若未配合
list-unstyled，ul仍有圆点，ol仍有数字 -
li之间默认有空格（因换行符被渲染为文本节点），建议写成单行或用注释消除间隙 - 响应式控制需额外加断点类，如
list-inline list-inline-sm（但 Bootstrap 5 实际未提供这类尺寸变体，需自定义）
- 首页
- 关于
- 联系
为什么单独用 list-inline 还有圆点？
因为 Bootstrap 5 的 list-inline CSS 规则里压根没碰 list-style 属性。它的源码本质只是：
.list-inline {
padding-left: 0;
list-style: none; /* ← 注意！这里其实有，但仅作用于 ul 自身 */
}
.list-inline li {
display: inline-block;
}
问题出在继承链上：list-inline 确实设了 list-style: none，但它只作用于 ul 元素自身；而圆点实际由 li 渲染（取决于浏览器默认样式）。真正可靠的做法仍是显式加 list-unstyled。
- Chrome/Firefox 对
ul li的默认list-style-type是继承父级的，所以父级list-style: none通常够用 - 但 Safari 在某些版本中表现不一致，尤其嵌套列表里，
list-unstyled更稳妥 - 不要依赖「看起来没了」就跳过
list-unstyled，语义和兼容性才是关键
自定义清除标记的最小成本方案
如果项目已禁用 Bootstrap 的 CSS，或想彻底脱离框架控制，最轻量的覆盖方式是：
ul.no-bullets, ol.no-bullets {
list-style: none;
padding-left: 0;
}
.no-bullets li {
display: inline-block; /* 如需 inline 效果 */
}
注意两点：
- 必须同时清
list-style和padding-left，否则左侧留白仍在 - 若要支持 IE11，
inline-block需补vertical-align: top避免基线对齐错位 - 别用
!important，优先提高选择器权重（比如加ul.no-bullets而非仅.no-bullets）
复杂点往往不在「怎么去掉圆点」，而在于是否意识到：列表标记的可见性、间距、排列是三个正交问题，得分开处理。混用类名或靠猜测调试，反而拖慢进度。
