清空 .navbar-brand 的左右内边距即可消除 logo 两侧“看不见的空白”，因其默认 padding: 0.5rem 1rem，叠加 .navbar 的同值 padding 导致留白；应优先用 padding-inline: 0 覆盖，避免影响 flex 布局。
直接删掉 .navbar-brand 和 .navbar 的默认内边距，再用 margin 或 gap 精控间距——别碰 padding，否则右侧导航会被顶偏。
为什么 Logo 左右总有“看不见的空白”
Bootstrap 5 中 .navbar-brand 默认带 padding: 0.5rem 1rem，父容器 .navbar 也自带 padding: 0.5rem 1rem，两者叠加就是你看到的左右留白。这不是 bug，是设计预留；但如果你要贴边对齐或紧凑布局，就得主动清掉。
-
.navbar-brand的左右 padding 来自其自身样式，不是继承来的 -
.navbar的左右 padding 影响整个导航栏宽度，清它会影响折叠按钮位置 - 只清
.navbar-brand的padding-inline就够了，.navbar的 padding 可以不动
清空 Logo 左右留白的实操写法
优先用 CSS 覆盖，避免 !important：
.navbar-brand {
padding-left: 0;
padding-right: 0;
}
- 如果用了 Bootstrap 5.3+，可改用逻辑属性：
padding-inline: 0 - 若同时想缩窄 Logo 宽度（比如只占 25%），直接加
width: 25%并让图片填满：.navbar-brand img { width: 100%; height: auto; } - 别给
.navbar-brand加margin-left或margin-right——它会干扰 flex 布局中ms-auto/me-auto的计算
清完留白后导航项错位？检查这三个点
常见现象：Logo 缩小/清 padding 后，右侧菜单没左移、中间空一大块。本质是容器未收缩或 flex 分配异常：
-
.navbar-brand清完 padding 后，若内部<img>还有固定宽高（如width: 120px），它仍会撑开空间——得同步设width: 100%或用max-width - 确认没残留旧样式，比如
.logo { margin-left: 5px; }—— 这类规则会覆盖清空效果 - 如果用了
justify-content: space-between，清完 padding 后 Logo 和菜单会立刻“弹开”，此时应换用gap控制间距，或改用me-auto/ms-auto三栏结构
最易被忽略的是：移动端折叠态下，.navbar-brand 的 padding-inline: 0 仍生效，但若外层 .offcanvas-body 没设 justify-content-center，Logo 会回到左上角——这和桌面端清 padding 是两套逻辑，别混着调。
