Question

我已尝试在此div上使用类行，但无法在下一行中移动制表符。

 <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

使用flexbox 使用flexbox，您可以修复具有固定尺寸，内容大小尺寸或剩余空间尺寸的行或列。

Answer 2

使用导航添加'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>

Bootstrap Tab超出屏幕宽度

2 个答案: