Bootstrap 5 navbar如何实现左对齐项溢出隐藏、右对齐项始终可见

实现原理 #

利用Flex布局的伸缩属性，强制右侧导航容器不收缩，左侧导航容器自动占满剩余空间、超出部分隐藏，完全不需要JS介入。

代码实现 #

CSS样式 #

/* 导航栏容器强制不换行，避免右侧项掉行 */
.navbar-collapse {
  flex-wrap: nowrap !important;
}

/* 左侧导航包裹容器 */
.navbar-left-wrap {
  flex: 1 1 auto;
  overflow: hidden;
}

/* 左侧导航列表配置 */
.navbar-left-wrap .navbar-nav {
  flex-wrap: nowrap;
  overflow: hidden;
  /* 可选：溢出部分显示省略号 */
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 左侧单个导航项禁止折行 */
.navbar-left-wrap .nav-item {
  white-space: nowrap;
  flex-shrink: 0;
}

/* 右侧导航包裹容器：强制不收缩，始终保持自身宽度 */
.navbar-right-wrap {
  flex: 0 0 auto;
}

HTML结构示例（适配Bootstrap导航栏） #

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">站点Logo</a>
  <div class="collapse navbar-collapse">
    <!-- 左侧导航区域 -->
    <div class="navbar-left-wrap">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">首页</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">产品中心</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">解决方案</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">关于我们</a>
        </li>
        <!-- 可继续添加更多左侧导航项 -->
      </ul>
    </div>
    <!-- 右侧导航区域 -->
    <div class="navbar-right-wrap">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="#">消息通知</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">个人中心</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

补充说明 #

• 该方案不影响导航栏原有折叠逻辑，到达预设断点后会正常切换为汉堡菜单折叠状态
• 可根据业务需求选择是否开启溢出省略号显示，不需要直接删除text-overflow相关配置即可

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