Bootstrap 5 实现水平导航最省事的方式是使用 navbar 组件并添加 .navbar-expand-* 类，否则默认折叠；需配合 .navbar-brand、.navbar-nav 和 .navbar-collapse，兼顾响应式、对齐与交互。
用 Bootstrap 5 的 nav + navbar-nav 实现水平导航最省事
Bootstrap 5 默认把 .nav 设为垂直堆叠，但加个 .nav-pills 或 .nav-tabs 就能立刻横排——不过真要快速做顶部水平导航栏，直接上 .navbar 更稳妥，它天生支持响应式、自动对齐、间距和 hover 状态。
关键不是“能不能横”，而是“要不要响应式折叠”“需不需要品牌 logo”“是否要右侧对齐”。选对容器决定一半工作量。
-
.navbar是完整导航栏组件，含.navbar-brand、.navbar-nav、.navbar-toggler，适合带 logo 和移动端折叠的场景 -
.nav单独用更轻量，加.flex-row或.justify-content-center可控性更强，适合纯菜单无交互需求 - 别用
.nav-pills做顶部导航——它默认圆角+背景色，语义是“标签切换”，不是“主导航”
写法必须包含 .navbar-expand-* 才能水平展开
这是最容易漏掉的一环。Bootstrap 5 的 .navbar 默认在所有断点都折叠（即 hamburger 菜单），不加 .navbar-expand-* 类，菜单永远竖着、永远收起。
常见错误：只写 ，结果菜单堆成一列，还纳闷为什么没生效。
立即学习“前端免费学习笔记（深入）”；
其中 .navbar-expand-lg 表示「≥992px 屏宽时展开为水平」，小屏自动折叠；换成 .navbar-expand-md 就是 ≥768px 展开，按实际设计定。
.nav-link 的默认样式和 hover 行为要注意
Bootstrap 给 .nav-link 设了 display: block 和 padding，所以即使横排，点击热区也够大。但它默认没有下划线、没有背景变化，用户可能看不出哪项被激活。
- 当前页高亮靠
.active类，必须手动加到对应上，JS 不会自动加 - hover 时文字颜色变深，但无背景色——如果想加背景，得自己写 CSS：
.nav-link:hover { background-color: #f8f9fa; } - 移动端折叠后，
.nav-link依然保持 padding，但父容器.navbar-collapse是绝对定位，不会撑开页面高度
自定义间距和字体大小别硬改 padding，优先用 Bootstrap 间距工具类
很多人一上来就写 style="padding-left: 20px"，结果响应式失效、维护困难。Bootstrap 提供了一套可靠的 mx-* / px-* / me-* / ms-* 工具类，适配 flex 布局方向。
比如让菜单项之间有统一间隙：
me-3 是 margin-right: 1rem，比手写 CSS 更快且兼容 RTL。字体大小同理，用 fs-5、fs-6 而非 font-size: 14px。
真正麻烦的是当你要微调下边框粗细或 hover 动画时——那得自己写 CSS，Bootstrap 的 nav 组件没暴露这些细节控制点。
