如何让含15个元素的导航栏等宽不换行，避免溢出屏幕？

嘿，我来帮你搞定这个导航菜单的溢出问题！你提到用nav-justified和flex-nowrap实现15个等宽导航项，但调整窗口到一定程度后，菜单就停止缩小并溢出屏幕——这是因为Bootstrap的nav-justified默认会给每个.nav-item设置最小宽度（默认是6.25rem），再加上flex-nowrap强制不让导航项换行，两者叠加就导致了这个问题。

下面给你几个可行的解决方案，你可以根据需求选择：

方案1：允许小屏自动换行（最简单） #

如果能接受窄屏时导航项堆叠换行，直接去掉flex-nowrap类就行，nav-justified本身在小屏设备上会自动切换为堆叠布局：

<ul class="nav nav-justified">
  <li class="nav-item"><a class="nav-link">Item 1</a></li>
  <li class="nav-item"><a class="nav-link">Item 2</a></li>
  <!-- 剩余13个导航项 -->
</ul>

方案2：强制导航项继续收缩（保持不换行） #

要是想保持导航项在一行不换行，就得覆盖nav-justified的最小宽度限制，同时给导航链接加文本截断，避免内容撑破容器：
首先修改HTML，给每个nav-link加上text-truncate类：

<ul class="nav nav-justified flex-nowrap">
  <li class="nav-item"><a class="nav-link text-truncate">Item 1</a></li>
  <li class="nav-item"><a class="nav-link text-truncate">Item 2</a></li>
  <!-- 剩余13个导航项 -->
</ul>

然后添加自定义CSS，移除默认最小宽度并让导航项可以均匀收缩：

.nav-justified .nav-item {
  min-width: auto; /* 去掉Bootstrap默认的最小宽度限制 */
  flex: 1 1 auto; /* 让每个项均匀分配空间，且支持收缩 */
}

这样导航项会一直收缩到内容的最小宽度，text-truncate会在文本过长时显示省略号，保证布局不会乱。

方案3：添加横向滚动（保留原宽度） #

如果希望导航项保持原有的等宽，同时避免溢出，可以把整个导航包在一个带横向滚动的容器里：

<div class="overflow-x-auto">
  <ul class="nav nav-justified flex-nowrap">
    <li class="nav-item"><a class="nav-link">Item 1</a></li>
    <li class="nav-item"><a class="nav-link">Item 2</a></li>
    <!-- 剩余13个导航项 -->
  </ul>
</div>

窄屏时容器会出现横向滚动条，用户可以滑动查看所有导航项，完美保留了等宽布局的效果。

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