css - Bootstrap Tab 超出屏幕宽度

Question

我已经尝试在这个 div 上使用 class row 但无法在下一行移动标签..

 <div class="navwrap">
        <ul class="nav nav-tabs" 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>

如何移动其他行剩余的标签？

Current Image tabs

Answer 1

添加带有 nav 的 'flex-wrap' 类，这样你就可以在新行中移动标签

<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>