Bootstrap 5 折叠按钮的 SVG 路径定义在 SCSS 变量 $navbar-toggler-icon-bg 中，其值为 base64 编码的 SVG 字符串；CDN 用户需覆盖 .navbar-toggler-icon::before 的 background-image 并使用 URL 编码的自定义 SVG，源码用户可重写该变量后重新编译。
折叠按钮的 SVG 路径在哪定义
bootstrap 5 的 navbar-toggler 默认用的是内联 svg，不是 css 控制的三横线，所以改 border 或 background 没用。关键路径在 bootstrap 的 scss 变量 $navbar-toggler-icon-bg，它直接拼成 base64 编码的 svg 字符串。
- 默认值是三根水平线（
data:image/svg+xml,%3csvg...%3e），编码里包含stroke-width="2"和dy="0.5"这类偏移控制 - 想改线条粗细、间距、颜色，不能只覆盖 CSS 类，得重写这个变量或替换整个 SVG
- 如果你用的是 CDN 版本（没编译 SCSS），只能靠覆盖
.navbar-toggler-icon::before的content属性来换 SVG
用自定义 SVG 替换默认图标（CDN 用户适用）
最稳妥的做法是用纯 CSS 注入新 SVG，绕过 base64 编码限制。注意：必须用 URL 编码格式，且 viewBox 和尺寸要匹配原始图标（通常为 1em × 1em）。
/* 替换为更细、间距更大的三横线 */
.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='%23333' stroke-linecap='round' stroke-miterlimit='10' stroke-width='1.5' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}-
stroke-width='1.5'控制线条粗细（默认是 2） -
d='M4 7h22'是第一根线，Y 坐标 7；第二根设为M4 15h22，第三根M4 23h22—— 这样间距更宽松 - 颜色用
%23333（URL 编码的#333），别漏掉%编码 - 如果线条显示不全，检查
viewBox='0 0 30 30'是否与你的路径范围匹配
用 SCSS 重定义变量（使用源码编译时）
如果你用的是 Bootstrap 源码（比如通过 npm 安装 + Sass 构建），直接改 $navbar-toggler-icon-bg 变量最干净，它会在编译时生成新 base64。
// _custom.scss
$navbar-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#007bff' stroke-linecap='round' stroke-width='1.8' d='M4 8h22M4 15h22M4 22h22'/></svg>");
@import "bootstrap/scss/bootstrap";- 这里不用手动 URL 编码 —— Sass 编译器会自动处理
- 确保路径中没有单引号冲突（Sass 里用双引号包裹整个 URL）
- 改完后重新构建，否则变量不会生效
- 注意
stroke-width单位是 px，但实际渲染受font-size影响，建议保持在 1.5–2.2 范围内
为什么加 !important 有时也不生效
因为 Bootstrap 的默认样式是用 ::before 伪元素注入的，而你写的 .navbar-toggler-icon 规则如果 specificity 不够，会被覆盖。真正起作用的是 .navbar-toggler-icon::before 的 content 或 background-image。
- 不要只写
.navbar-toggler-icon { background-image: ... }，加上::before更稳：.navbar-toggler-icon::before { background-image: ... } - 如果用了 CSS-in-JS 或框架封装的 Navbar 组件（如 React-Bootstrap），它可能绕过了原生 class，得查组件文档看是否支持
togglerIconprop - 浏览器 DevTools 里检查 computed 样式，确认生效的是哪条
background-image规则 —— 经常是旧缓存或拼写错误（比如把navbar-toggler-icon写成navbar-toggle-icon）
改线条样式本质是换 SVG，不是调 CSS 边框。最容易卡住的地方是 URL 编码漏字符、viewBox 尺寸不匹配、或者压根没命中 ::before 伪元素。
