如何在Bootstrap中实现小屏幕下navbar菜单项不换行且不折叠？

解决方法 #

你遇到的问题由两个核心原因导致：一是navbar-expand-sm类只在≥576px的屏幕下保持导航栏展开，小屏会触发折叠逻辑；二是导航容器和内部列表默认允许换行，内容拥挤时就会自动折行。按以下步骤修改即可：

修改步骤

• 把<nav>标签的navbar-expand-sm替换为navbar-expand，该类会让导航栏在所有屏幕尺寸下都保持横向展开，不会触发折叠逻辑
• 给<nav>标签添加flex-nowrap overflow-auto类，强制容器不换行，内容超出屏幕宽度时自动出现横向滚动条，避免折行
• 给所有的.navbar-nav元素加上flex-nowrap类，避免列表内部的导航项换行
• 可选：可以添加少量自定义CSS缩小导航项的内边距，降低小屏的空间占用，避免内容过挤

修改后的完整代码

<!-- 自定义可选CSS，可加到style标签里 -->
<style>
#topbar .nav-link {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
#topbar .tobar-text {
  white-space: nowrap;
}
</style>

<nav id="topbar" class="navbar navbar-expand bg-primary navbar-dark flex-nowrap overflow-auto">
    <ul class="navbar-nav flex-nowrap">
        <li class="nav-item active d-flex align-items-center">
            <a class="nav-link" href="#"><i class="fas fa-bars"></i></a>
        </li>
        <li class="nav-item d-flex align-items-center">
            <a class="nav-link" href="#"><span class="tobar-text">Brand</span></a>
        </li>
    </ul>
    <ul class="navbar-nav flex-nowrap">
        <li class="nav-item">
            <a href="#" class="nav-link d-flex align-items-center">
                <span class="tobar-text">Link 1</span>
            </a>
        </li>
        <li class="nav-item">
            <a href="#" class="nav-link d-flex align-items-center">
                <span class="tobar-text">Link 2</span>
            </a>
        </li>
    </ul>
    <ul class="navbar-nav ml-auto flex-nowrap">
        <li class="nav-item">
            <a href="#" class="nav-link">Contact Us</a>
        </li>
        <li class="nav-item">
            <a href="#" class="nav-link">About Us</a>
        </li>

    </ul>
</nav>

如果不需要横向滚动条，也可以把overflow-auto换成overflow-hidden，超出的内容会直接隐藏，不会显示滚动条。

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