导航栏右侧加社交图标应将其置于navbar-collapse外、navbar内部最右侧，用ms-auto推至最右；切勿塞入navbar-nav内，避免小屏折叠后消失；图标优先用Bootstrap Icons的标签，配合fs-5和text-*类控制尺寸与颜色，并确保每个图标链接含aria-label和rel="noopener noreferrer"。
导航栏右侧加社交图标，用 ms-auto 推到最右
别把图标塞进 navbar-nav 里跟菜单项混排——那样会受 navbar-expand 断点控制，小屏折叠后图标消失。正确做法是把社交链接组放在 navbar-collapse 外、navbar 内部的最右侧，用 ms-auto（margin-left: auto）自动推过去。
常见错误是加 float-end 或 text-end，但 Bootstrap 5 已弃用 float，而 text-end 只影响内联内容对齐，对 flex 容器里的图标组无效。
-
ms-auto必须作用在包含图标的直接父容器上，比如<div class="d-flex gap-2 ms-auto"> - 确保该容器没有被
flex-wrap或justify-content-between干扰布局逻辑 - 如果用了
navbar-expand-lg，图标组在lg下才显示，sm和md下需额外加d-none d-lg-flex控制显隐
图标用 <i> 还是 <svg>？优先选 bootstrap-icons 的 <i>
导航栏空间紧凑，图标需要快速加载、尺寸可控、颜色可继承。此时 <i class="bi bi-github"></i> 比手写 SVG 更省事：类名统一、自带 vertical-align: middle 基线对齐、支持 fs-5 / text-primary 等工具类直接调色。
常见错误是只写 <i class="bi-github"></i> 漏掉 bi 前缀，或引入了旧版 CDN（如 v1.10.5）却用了新图标名（如 bi-twitter-x），导致图标不显示。
- CDN 地址必须匹配图标版本：
https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css - 图标尺寸别用
style="font-size: 18px"，改用fs-4或fs-5，响应式更稳 - 所有图标必须包裹在
<a>标签中，并带rel="noopener noreferrer"（尤其目标为_blank时）
小屏下图标堆叠或溢出？检查 d-flex 和 gap 的组合
图标在手机上挤成一列还左对齐，不是栅格问题，而是父容器没启用 flex 行为或间距失控。导航栏默认是 flex 容器，但社交图标组若用 div 包裹却没加 d-flex，内部图标仍按 block 渲染，高度错乱、点击热区偏移。
常见错误是给每个图标单独加 mx-1，结果小屏换行后左右外边距叠加，导致首尾图标贴边甚至溢出。
- 统一用
d-flex flex-wrap justify-content-center gap-2（Bootstrap 5.2+）控制排列和间距 - 避免在图标上设
display: block或width: 100%，会破坏 inline 基线对齐 - 如果项目还在用 Bootstrap 5.1 或更低版本，
gap不生效，改用me-2并在最后一项加me-0
图标颜色在深色模式下失效？靠 currentColor 和 text-*<code> 类联动</H3>
<p>Bootstrap Icons 默认用 <code>fill="currentColor"
，所以图标颜色完全跟随父元素的 color。这意味着：给图标父容器加 text-white，图标就白；加 text-muted，图标就灰；深色模式下只要 body 有 data-bs-theme="dark"，配合 text-body 就能自动适配。
常见错误是手动给 <i> 加 style="color: #007bff"，结果深色模式下图标变成蓝底蓝字，不可见。
- 别在图标上硬编码颜色，用
text-primary、text-secondary等语义类替代 - 如果导航栏背景是深色（如
bg-dark），记得给图标容器加text-light或text-white - 测试时打开浏览器的“强制深色模式”，看图标是否随
color变化，而不是只看亮色模式表现
aria-label 不是可选项。屏幕阅读器不会读图标类名，也不会猜“那个小方块是 GitHub”，必须显式写 aria-label="GitHub 仓库"。漏掉它，整个导航栏的可访问性就断了一环。 
