要加粗bootstrap 5汉堡按钮图标，必须修改.navbar-toggler-icon的base64 svg中stroke-width值（如改为"3"），而非仅调padding或font-size；同时需配合调整.navbar-toggler的padding和border-radius，避免设height，以兼顾视觉与ios热区要求。
直接改 .navbar-toggler 的 padding 和 font-size 不行
Bootstrap 5 的汉堡按钮（.navbar-toggler）默认不设固定高度，而是靠内部 .navbar-toggler-icon 的 SVG 背景 + 外层元素的 padding 和 line-height 共同撑开。你单独调 padding 或 font-size，只会让容器变大，图标本身大小和线条粗细完全没变——结果是按钮“空有高度”，中间三条线还是那么细、那么小，视觉上更突兀。
真正要调的是 .navbar-toggler-icon 的 SVG 内容
图标由 base64 编码的 SVG 控制，关键参数是 stroke-width。改这个值才能让横线变粗或变细，而不是缩放整个图标。
- 原始 SVG（默认
stroke-width="2"）：<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg>
- 想加粗？把
stroke-width="2"改成"2.5"或"3"，再转成 base64 - 在自定义 CSS 中覆盖（确保加载顺序在 Bootstrap CSS 之后）：
.navbar-toggler-icon { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCI+PHBhdGggc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2Utd2lkdGg9IjMiIGQ9Ik0xIDdoMjhtMSA4aDI2bTEgMThoMjYiLz48L3N2Zz4="); } - 别用
--bs-navbar-toggler-icon-width：它只缩放整体 SVG，不改变线条粗细
如果还要同步调整按钮整体尺寸（比如更大点击热区）
光改图标还不够，.navbar-toggler 本身也需要配合调整，否则图标会居中偏上/偏下，或边缘留白奇怪。
- 优先控制
padding（不是height）：padding: 0.5rem 0.75rem比默认更宽松，又不破坏折叠逻辑 - 加
border-radius让圆角匹配设计系统，比如border-radius: 6px - 避免设
height或min-height：移动端展开时可能截断.navbar-collapse，尤其当里面含 dropdown - iOS Safari 会强制可点击区域 ≥44px 高，所以即使你设了
padding: 0.25rem，实际热区仍可能被拉高——这不是 bug，是系统可访问性保障
别踩的坑：伪类覆盖、媒体查询、JS 同步
容易以为“加个 @media 改小屏幕下的 font-size 就完事”，但这样会引入三重脱节：
-
.navbar-toggler-icon是背景图，不响应font-size变化 - JS 判断折叠状态只看
.navbar-expand-*类是否存在，和你的媒体查询无关 - 如果你用
::before注入 SVG，记得同时清除原background-image：.navbar-toggler-icon { background-image: none; } - CDN 用户无法改断点变量，也就没法靠
$navbar-breakpoint影响 toggler 行为——能动的只有 CSS 层面的图标和容器样式
