Bootstrap 4导航栏求助：实现按钮文本单行自动换行排列

我来帮你搞定这个导航栏的布局问题！你的需求是让导航按钮单行显示，一行填满后自动从下一行左侧开始排列，目前的代码主要是flex布局和float属性冲突导致达不到预期效果，咱们这样修改：

1. 调整导航容器的HTML类 #

把导航列表的navbar-nav ml-auto替换成navbar-nav flex-wrap justify-content-start w-100，直接利用Bootstrap的flex工具类实现换行和左对齐：

<ul id="menu-all-pages" class="navbar-nav flex-wrap justify-content-start w-100">
  <!-- 你的导航项保持不变 -->
</ul>

2. 修正CSS样式 #

去掉.nav-item里的float: left（flex布局下float会干扰正常排列），同时给导航链接加上强制单行的样式，确保按钮文本不会换行：

@media (min-width: 992px) {
  .nav-item {
    font-size: 13px;
    margin: 3px;
    padding: 0px;
    border: 1px solid #605555;
    border-radius: 3px;
  }
  /* 强制导航链接文本单行显示 */
  .nav-link {
    white-space: nowrap;
  }
}

为什么这样改？ #

• flex-wrap: wrap：让flex容器在空间不足时自动换行，这是实现多行排列的核心；
• justify-content-start：确保每行的导航项都从左侧开始排列，完全匹配你的需求；
• w-100：让导航容器占满父元素的宽度，这样才能准确判断什么时候该触发换行；
• 移除float:left：flex布局下float属性完全无效，反而会破坏flex的原生排列逻辑；
• white-space: nowrap：保证每个按钮的文本始终单行显示，不会因为文本过长而折行。

这样修改后，在大屏（≥992px）下，导航项会自动填满一行后从下一行左侧开始排列，每个按钮的文本也能稳定保持单行啦！

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