Вкладка Bootstrap выходит за пределы ширины экрана

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>

Как переместить оставшиеся теги в другую строку?

Вкладки текущего изображения

Answer 1

Добавьте класс 'flex-wrap' с помощью nav, чтобы вы могли перемещать вкладку в новой строке

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

Answer 2

Использование flexbox Используя flexbox, вы можете фиксировать строки или столбцы с фиксированными размерами, размерами содержимого или размерами оставшегося пространства.