Bootstrap 5+ 的 navbar-toggler-icon 图标“粗细”实为 SVG 中 path 的 stroke-width，须修改 data URL 内该值（如从 2 改为 3），并确保完整重写编码后的 background-image，同时注意 viewBox 适配、URL 编码严格性及 color 配合 currentColor 实现主题响应。
navbar-toggler-icon 的粗细不是“边框”概念，而是 SVG 路径的 stroke-width
bootstrap 5+ 的 .navbar-toggler-icon 是一个纯 css 背景图（data url 编码的 svg），它没有传统意义上的“边框”，所谓“粗细”实际是 svg 内部 <path></path> 元素的 stroke-width 属性值。直接改 border 或 font-size 完全无效。
常见错误：试图用 .border-2、font-weight 或调整按钮 padding 来“加粗图标”——这些对背景图里的线条毫无影响。
- 必须修改 SVG data URL 中的
stroke-width（例如从2改成3） - 同时注意
viewBox和path坐标是否适配新粗细，避免线条溢出或粘连 - 颜色由
stroke属性控制，推荐用currentColor以便随父元素color自动同步
覆盖 background-image 时必须重写整个 data URL，不能只改 stroke-width
Bootstrap 不提供单独控制图标的 CSS 变量（如 --bs-navbar-toggler-icon-stroke），所以你不能只覆盖某一部分；必须提供完整的新 data URL。
示例（将默认三横线的线条从 2px 加粗到 3px）：
.navbar-toggler-icon {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='currentColor' stroke-width='3' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
- URL 中所有单引号、尖括号、空格都需严格 URL 编码（
'→%27，→ <code>%3C） - 若复制在线生成器输出，务必检查是否含多余换行或未编码字符，否则图标会彻底消失
- 不要省略
xmlns和viewBox，它们影响缩放和对齐
粗细变化后图标居中偏移？检查 height / width 和 background-position
加粗线条可能让整体视觉重心下移或变宽，尤其当原始 SVG 的 viewBox 边距紧凑时。此时图标容易“顶到上边”或左右不对齐。
- 确保
.navbar-toggler本身有明确尺寸（Bootstrap 默认是height: 38px，width: 38px） - 加粗后若上下不居中，可微调
background-position：background-position: 50% 50%; - 更稳妥的做法：在 SVG 内部预留足够内边距，比如把
viewBox="0 0 30 30"改为viewBox="-2 -2 34 34"，再调整<path></path>坐标 - 别依赖
background-size: contain——它会缩放整个 SVG，导致线条又变细
深色导航栏下加粗线条发虚？优先用 currentColor + color 统一控制
在 .navbar-dark 下，如果 SVG 中写死 stroke='%23fff'，加粗后可能因抗锯齿在高 DPI 屏上显得毛边；而用 currentColor 并配合 color 设置，能保持清晰度和主题一致性。
- 给
.navbar-toggler显式设color: #fff;（深色模式）或color: #212529;（浅色模式） - 确保该
color值未被其他规则（如.navbar-dark .navbar-nav .nav-link）意外覆盖 - 避免在 data URL 中硬编码十六进制色值——既难维护，又无法响应主题切换
stroke-width 后发现图标不见了——大概率是 URL 编码漏了一处 %3E，或者忘了把原生 Bootstrap 的 background-image 完全覆盖掉。
