navbar折叠按钮默认在右侧，因其父容器.navbar为flex布局且.navbar-toggler默认应用margin-left: auto（或ms-auto），被自动推至容器末尾；左对齐应删ms-auto加me-auto，居中可用d-flex justify-content-center，自定义图标需同步重置width、height和background-size。
Navbar折叠按钮默认位置在哪？
Bootstrap 的 navbar-toggler 默认是右对齐、固定在 .navbar 内部的 flex 容器末尾，靠的是 margin-left: auto（或 ms-auto）实现。它不是绝对定位，而是依赖父容器的 flex 布局流——这意味着直接改 position: absolute 很容易破坏响应式行为，尤其在不同断点下。
想左移或居中，优先用 Bootstrap 工具类
不用写 CSS，多数场景靠内置间距和 flex 工具类就能解决：
- 左对齐：删掉
ms-auto，加上me-auto（或ms-0+me-auto），让按钮成为第一个 flex 项 - 居中：给
.navbar加d-flex justify-content-center，再把.navbar-toggler单独设为position-relative避免被其他内容挤偏 - 微调水平位置：用
ms-* / me-*（如ms-2）替代margin-left，确保响应式断点一致
示例（居中）：
<nav class="navbar navbar-expand-md d-flex justify-content-center"><button class="navbar-toggler position-relative" type="button" data-bs-toggle="collapse" data-bs-target="#nav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="nav">...</div>
</nav>
自定义图标或尺寸时，必须重置 background-image
Bootstrap 的 .navbar-toggler-icon 是用 SVG base64 编码的背景图，直接改 width/height 会导致图标拉伸或裁切：
- 改大小：同时设置
width、height和background-size: 100% 100% - 换图标：覆盖
background-image，推荐用 inline SVG 或 data URL，避免额外请求 - 常见错误：只改
font-size对图标无效，因为它是背景图，不是字体图标
例如缩放为原尺寸 80%：
.navbar-toggler-icon {
width: 1.2rem;
height: 1.2rem;
background-size: 100% 100%;
}
在 @media (max-width: ...) 里覆盖样式要小心断点冲突
Bootstrap 5 的 navbar-expand-md 表示「在 md 及以上才展开」，所以折叠逻辑生效于 max-width: 767.98px。如果你在自定义媒体查询里写 @media (max-width: 768px)，可能和 Bootstrap 的断点不完全对齐，导致按钮在 768px 精确值处行为异常。
- 推荐复用 Bootstrap 断点变量：
@media (max-width: #{map-get($grid-breakpoints, md) - 1})（Sass） - 纯 CSS 项目：用
@media (max-width: 767.98px)而不是768px - 检查是否被
.navbar-collapse.show的动画影响：折叠状态切换时，max-height过渡可能干扰按钮定位
真正难搞的不是位置本身，而是它和 .navbar-collapse 的 display 切换、height 动画、以及父级 flex 容器的 wrap 行为耦合太紧——动一个地方，得同步看三个地方的渲染结果。
