默认情况下，Bootstrap 的 .navbar-nav 列表项会垂直堆叠；要实现水平排列，需借助 navbar-expand-* 响应式类或自定义 Flex 布局，核心是确保 容器启用 flex 且子项不换行。

默认情况下，bootstrap 的 `.navbar-nav` 列表项会垂直堆叠；要实现水平排列，需借助 `navbar-expand-*` 响应式类或自定义 flex 布局，核心是确保 `

` 容器启用 flex 且子项不换行。

在你的代码中，导航栏已正确使用了 Bootstrap 5 的响应式类 navbar-expand-sm，理论上应在小屏幕及以上宽度时自动水平展开。但当前链接仍垂直堆叠，根本原因在于：缺少 navbar-nav 的父容器触发 flex 布局所需的最小结构完整性，且未显式启用响应式折叠/展开逻辑。

✅ 正确做法：使用 Bootstrap 内置响应式类（推荐）

确保

元素包含完整的 navbar-expand-* 类（如 navbar-expand-md），并在

上保留 navbar-nav 类。同时，必须将所有导航项包裹在
内——这是 Bootstrap 控制折叠/展开行为的关键容器：

<nav class="navbar navbar-expand-md navbar-dark sticky-top">
  <div class="container">
    <a class="navbar-brand" href="#">
      <img src="img/logo.png"    style="max-width:90%"  style="max-width:90%" alt="Nucamp Logo" />
    </a>

    <!-- ✅ 关键：用 navbar-collapse 包裹导航项 -->
    <div class="navbar-collapse collapse">
      <ul class="navbar-nav me-auto">
        <li class="nav-item">
          <a class="nav-link active" href="#">
            <i class="fa-solid fa-house fa-lg me-1"></i>Home
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="aboutus.html">
            <i class="fa-solid fa-info fa-lg me-1"></i>About
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">
            <i class="fa-solid fa-list fa-lg me-1"></i>Sites
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="contactus.html">
            <i class="fa-solid fa-address-card fa-lg me-1"></i>Contact
          </a>
        </li>
      </ul>

      <!-- 右侧内容（天气、登录）保持原结构 -->
      <div id="weather" class="d-flex align-items-center me-3">
        <i id="weather-icon"></i>
        <span id="weather-temp"></span>
        <span id="weather-description" class="d-none d-lg-inline ms-1"></span>
      </div>

      <span class="navbar-text">
        <a role="button" data-bs-toggle="modal" data-bs-target="#loginModal">
          <i class="fa-solid fa-right-to-bracket me-1"></i>Login
        </a>
      </span>
    </div>
  </div>
</nav>

? 为什么你原来的代码没生效？
你省略了

容器，导致 Bootstrap 无法识别导航项为可折叠/展开的响应式内容组，navbar-expand-sm 失去作用，浏览器回退到

默认的块级垂直流布局。

⚙️ 补充说明：何时需要自定义 CSS？

仅当需精细控制间距、对齐或覆盖默认行为时，才建议添加少量自定义样式。例如：


VPS Bootstrap
从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。
下载

/* 可选：微调导航项水平间距 */
.navbar-nav .nav-link {
  padding: 0.5rem 1rem; /* 比默认更紧凑 */
}

/* 可选：确保图标与文字垂直居中 */
.nav-link i {
  vertical-align: middle;
}

⚠️ 注意事项

• *不要移除 `navbar-expand-类**：它决定了导航栏在哪个断点开始水平展开（如sm= ≥576px，md= ≥768px）。若希望始终水平显示（无折叠），可用navbar-expand`（无后缀）。
• 避免直接给
  设 display: flex
  ：这会破坏 Bootstrap 的响应式折叠逻辑，导致移动端菜单无法收起。
• 图标库加载需确保 CDN 或本地路径有效：你使用了 Font Awesome 6，务必确认 /node_modules/@fortawesome/... 路径在生产环境可访问，或改用 CDN（如答案中所示）：

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">

✅ 总结

水平排列导航链接不是 HTML 结构问题，而是 Bootstrap 响应式系统配置问题。只需两步：

1. 为
   添加合适的 navbar-expand-* 类（推荐 navbar-expand-md）；
2. 将所有 .nav-item 严格包裹在
   内。

   完成之后，链接将在指定断点及以上宽度自动水平排列，移动端则收起为汉堡菜单——既符合语义，又完全响应式。