Bootstrap Tab超出屏幕宽度，如何让剩余标签换行？

你遇到的是Bootstrap默认nav-tabs组件的换行限制——默认情况下，.nav-tabs的容器是flex布局且flex-wrap: nowrap，超出屏幕的标签会挤在一起而不会自动换行。下面给你几个简单有效的解决方法：

方法一：用Bootstrap内置工具类快速解决 #

直接给<ul>元素添加flex-wrap类，这是Bootstrap专门用来控制flex容器换行的工具类，无需额外写CSS：

<div class="navwrap">
  <ul class="nav nav-tabs flex-wrap" role="tablist">
    <li class="nav-item" *ngFor="let menu of menudata; let i=index">
      <a class="nav-link" (click)="changecategory(i,menu.id)" [class.active]="menu.isSelected" data-toggle="tab" role="tab">
        {{menu.name}}
      </a>
    </li>
  </ul>
</div>

方法二：自定义CSS实现更灵活的控制 #

如果需要调整标签间距、最小宽度等细节，可以添加自定义样式：

.navwrap .nav-tabs {
  flex-wrap: wrap;
  /* 可选：调整标签之间的间距 */
  gap: 0.5rem;
}

.navwrap .nav-tabs .nav-item {
  /* 可选：给标签设置最小宽度，避免过窄 */
  min-width: 120px;
}

把这段代码放到你的组件样式文件或者全局样式文件里即可。

补充：为什么加row类没用？ #

Bootstrap的row类是为网格布局设计的，主要配合col-*类实现响应式列布局，并不适合用来控制导航标签的换行逻辑，所以添加row类达不到预期效果哦~

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