Bootstrap 5如何实现固定顶部导航栏nav-item单行排列

导航项分两行展示是Bootstrap默认样式导致的：.navbar-nav类默认设置了纵向flex布局，所有子项会垂直堆叠。不需要编写额外自定义CSS，用Bootstrap自带的工具类就能实现单行排列，完全符合框架使用规范：

• 给承载导航项的<ul>标签添加flex-row类，强制将flex布局方向改为横向，所有.nav-item就会在同一行展示
• 可选：给每个.nav-item添加水平间距类（比如mx-2），避免导航项间距过窄，视觉效果更合理

修改后可直接使用的代码：

<div class="col-md-3">
    <ul class="navbar-nav mb-2 mb-lg-0 flex-row">
        <li class="nav-item mx-2">
            <a class="nav-link text-white" href="login.html">Login</a>
        </li>
        <li class="nav-item mx-2">
            <a class="nav-link text-white" href="teaching.html">Teaching</a>
        </li>
    </ul>
</div>

如果需要做响应式适配，比如仅在屏幕宽度≥768px时保持单行、小屏自动纵向堆叠，只需要把flex-row替换为flex-md-row即可，不需要额外写媒体查询。

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