顶部细线进度条必须置于.navbar外层且紧贴其上，禁用内部嵌套；需设height:2px、position:sticky、transition:width，同步更新aria-valuenow，响应式下重置margin/padding并适配fixed-top。
顶部细线进度条必须用 .progress 套在 .navbar 外层，不能塞进导航内部
直接把 .progress 放在 .navbar 里面（比如作为第一个子元素），会导致小屏下进度条被裁剪、高度塌陷、与导航内容错位。真正能稳定显示的结构是：.progress 独立于 .navbar，且紧贴其上方——也就是“顶部细线”的物理位置来源。
常见错误写法：<nav class="navbar"><div class="progress"><div class="progress-bar"></div></div>...</nav>
这种结构会让 .progress 受限于 .navbar 的 overflow: hidden 或 flex 排布逻辑，尤其在折叠菜单展开时，进度条常被截断或消失。
- 正确 DOM 顺序应为：
<div class="progress"><div class="progress-bar"></div></div> <nav class="navbar">...</nav> -
.progress高度建议设为height: 2px或使用h-05（Bootstrap 5.3+），避免默认16px过粗 - 若需粘性跟随滚动，给
.progress加position: sticky; top: 0; z-index: 1000;，但必须确保父容器没有transform或will-change，否则 sticky 失效
.progress-bar 宽度动态更新时，aria-valuenow 必须同步改
顶部细线本质是视觉反馈，但无障碍支持不能妥协。如果只用 JS 改 style.width 而漏掉 aria-valuenow，屏幕阅读器会读出旧值，用户无法感知真实进度。
- 每次调用
element.style.width = '65%'时，必须同时执行element.setAttribute('aria-valuenow', '65') - 不要依赖 CSS 类切换（如
.progress-bar-success）来驱动宽度变化——类本身不带 width，不会触发 transition，也无法绑定语义值 - 初始状态建议显式设为
width: 0%; aria-valuenow="0"，避免从隐式 100% 回退造成动画错乱
要平滑动画，.progress-bar 必须加 transition: width，不能靠 .progress-bar-animated
.progress-bar-animated 是 Bootstrap 为条纹背景设计的滚动动画，和“顶部细线”的宽度增长无关。它只会让斜纹动起来，对填充进度毫无帮助，还可能和自定义 transition 冲突。
- 只需一行 CSS：
.progress-bar { transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1); } - 别写
transition: all—— 字体颜色、阴影等属性意外变化会引发抖动 - 如果进度由 IntersectionObserver 或 scroll 触发，注意节流：同一帧内多次更新只取终值，避免 layout thrashing
- 在 Vue/React 中用响应式数据绑定 width 时，确保传入的是字符串（如
`${progress}%`），不是数字，否则 style 不生效
移动端下细线容易偏移或断裂，关键在重置 padding 和 margin
桌面端看着居中细直的线，到手机上常变成左偏、断开、或被 navbar 阴影盖住。这不是进度条本身的问题，而是它和 navbar 之间的间距、对齐、z-index 在响应式断点下失控。
- 在
@media (max-width: 576px)中强制重置：.progress { margin: 0; padding: 0; }，消除 navbar 默认的mb-3或pt-2影响 - 若 navbar 启用了
fixed-top，.progress必须也设top: 0并加width: 100vw，否则窄屏下右侧留白 - 细线高度低于 2px 时（如
1px），部分安卓浏览器渲染模糊，建议用height: 1.5px+background: currentColor替代纯 border
