начальная загрузка angular 10 — отображение 5 столбцов подряд в цикле *ngfor

#angular-ui-bootstrap #angular10

#angular-ui-bootstrap #angular10

Вопрос:

Я хочу отобразить 5 столбцов подряд. 6 столбцов отображаются, если я использую col-2, 4 столбца отображаются, если я использую col-3. Как я могу отобразить 5 столбцов?

 <div class="row">
        <div class="col-2"  *ngFor="let control of controls; let i=index;">
           {{contol.data}}
        </div>
</div>
 

Ответ №1:

Вы можете использовать класс col-auto, который автоматически настраивает столбцы в зависимости от размера экрана, или вы можете создать свой собственный класс col для 5 столбцов, как показано ниже :

    .col {
      flex: 0 0 20%;
      max-width: 20%;
    }
 

Ответ №2:

Вы можете использовать класс столбцов col вместо col-2. Пожалуйста, взгляните на следующий код.

 <div class="row">
    <div class="col"  *ngFor="let control of controls; let i=index;">
        {{contol.data}}
    </div>
</div>
 

Я надеюсь, что это вам поможет. Спасибо.