Bootstrap导航栏链接小设备显示异常：最后一项折行问题求助

针对小设备上导航栏最后一个链接折成两行的问题，给你几个实用的解决思路：

• 缩短链接文本
  如果最后一个链接的文字太长（比如类似“联系我们并获取支持”这类长文本），直接简化成更短的表述（比如“联系我们”），从根源避免内容宽度超出容器导致折行。

• 添加强制不换行样式
  在自定义CSS文件里加入以下代码，让所有导航链接文本保持单行显示：

.navbar-nav .nav-link {
  white-space: nowrap;
}

• 调整导航栏折叠断点
  默认Bootstrap的导航栏在992px以下会折叠成汉堡菜单，如果你希望在更小的屏幕才触发折叠，可以自定义断点样式：

/* 屏幕宽度≤767px时显示汉堡菜单，隐藏导航项 */
@media (max-width: 767px) {
  .navbar-collapse {
    display: none !important;
  }
  .navbar-toggler {
    display: block !important;
  }
}
/* 屏幕宽度≥768px时显示正常导航，隐藏汉堡按钮 */
@media (min-width: 768px) {
  .navbar-collapse {
    display: flex !important;
  }
  .navbar-toggler {
    display: none !important;
  }
}

这样能让平板及以上尺寸保持完整导航，只有手机小屏才折叠，避免链接拥挤折行。

• 缩小导航项间距
  如果是因为导航项之间的内边距过大导致宽度不足，可适当减小间距：

.navbar-nav .nav-link {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

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