Bootstrap 4导航栏菜单显示异常排查：菜单未横向排列问题咨询

你遇到的问题核心是Bootstrap 4和Bootstrap 3的导航栏类名、结构差异很大，你用了Bootstrap 3的旧类来写Bootstrap 4的导航栏，导致样式完全不符合预期。下面是具体问题点和修复方案：

核心问题分析 #

1. 废弃的类名：Bootstrap 4移除了navbar-default、navbar-header这些Bootstrap 3专属类，换成了全新的主题类和布局类。
2. 缺失响应式展开类：没有添加navbar-expand-*类，导致导航栏默认处于折叠状态，菜单项只能堆叠显示。
3. 脚本顺序错误：Bootstrap 4依赖Popper.js实现部分交互，必须在Bootstrap.js之前引入Popper.js，你原代码的顺序反了，会导致功能失效。

修复后的完整代码 #

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a href="#" class="navbar-brand">CMS System</a>
    <ul class="navbar-nav">
      <li class="nav-item"><a href="#" class="nav-link">Home</a></li>
      <li class="nav-item"><a href="#" class="nav-link">About</a></li>
      <li class="nav-item"><a href="#" class="nav-link">Services</a></li>
      <li class="nav-item"><a href="#" class="nav-link">Contact</a></li>
      <li class="nav-item"><a href="#" class="nav-link">Profile</a></li>
    </ul>
  </div>
</nav>

关键修改点说明 #

• 导航栏主题与布局：用navbar-expand-lg navbar-light bg-light替代navbar-default，navbar-expand-lg保证大屏幕（≥992px）下导航栏横向展开，小屏幕自动折叠；navbar-light搭配bg-light是浅色主题，你也可以换成navbar-dark bg-dark使用深色主题。
• 移除冗余容器：删掉了navbar-header，Bootstrap 4的导航栏不需要这个额外容器，直接把品牌链接放在container-fluid里即可。
• 菜单项标准结构：给每个<li>添加nav-item类，每个<a>添加nav-link类，这是Bootstrap 4导航栏菜单项的标准样式依赖，能确保横向排列的样式生效。
• 修正脚本顺序：把Popper.js移到Bootstrap.js前面，保证Bootstrap能正确调用Popper的交互功能（比如下拉菜单的定位）。

如果需要在所有屏幕尺寸下都保持横向展开，只需把navbar-expand-lg换成navbar-expand即可。

内容的提问来源于stack exchange，提问作者Sumaira Samar