CSS 快速实现水平导航菜单方法

本文深入解析了在 Bootstrap 5 中快速、规范地实现响应式水平导航菜单的核心方法与常见陷阱：强调必须使用 `.navbar-expand-*` 类（如 `.navbar-expand-lg`）才能让导航栏在指定断点以上真正横排展开，否则默认始终折叠；对比了功能完整、开箱即用的 `.navbar` 组件（适合带 logo、移动端折叠和交互的生产场景）与更轻量灵活的 `.nav` + 工具类方案（适合纯菜单需求）；同时纠正常见误区，如避免误用语义不符的 `.nav-pills`，提醒手动添加 `.active` 实现当前页高亮，并倡导优先使用 Bootstrap 内置间距（`me-3`）、字体（`fs-5`）等工具类而非手写 CSS，兼顾效率、响应式与可维护性——掌握这些关键细节，就能一步到位写出专业、健壮且易于扩展的顶部导航栏。

用 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-* 类，菜单永远竖着、永远收起。

常见错误：只写