Bootstrap - сделать контент go новой строкой

Question

Я пытаюсь определить конкретный макет для рендеринга списка объектов.
Я использую angular и bootstrap, и я хотел бы использовать для l oop (ngFor) для цикла через список.
Каждая строка таблицы должна иметь три элемента.
Вот как это должно выглядеть (индексы массива в сетке):

|-------------|-------------|-------------|
|      0      |      1      |      2      |
|-------------|-------------|-------------|
|      3      |      4      |      5      |
|-------------|-------------|-------------|
[...]
|-------------|-------------|-------------|
|     n-1     |      n      |    empty    |
|-------------|-------------|-------------|

Я знаю, что могу объедините bootstrap row и bootstrap col, чтобы разделить массив на три элемента в строке.
Но я хотел бы знать, есть ли способ визуализировать 4-й элемент (и 7-й и т. д.) в новом строка без использования строки bootstrap.
Я имею в виду, есть ли способ определить ширину контейнера списка, чтобы при выполнении его ширины следующий элемент переходил в новую строку?
Это существенно упростить структуру для l oop.

Answer 1

Вам не нужен новый row. Прочитайте документы ...

"Если в одной строке размещено более 12 столбцов, каждая группа дополнительных столбцов как одна единица будет перенесена на новую строку . "

   <div class="row">
        <div class="col-4">
            1
        </div>
        <div class="col-4">
            2
        </div>
        <div class="col-4">
            3
        </div>
        <div class="col-4">
            4
        </div>
        ...
    </div>

https://codeply.com/p/pRaYHIjdNv

Bootstrap 3 - использовать более 12 столбцов подряд

Answer 2

Я попытался угадать вашу проблему и написать решение
Вы хотите показать новый элемент в новой строке, для этого вы можете написать, как показано ниже:

<div class="row">
        <div class="col-md-4">test 1</div>
        <div class="col-md-4">test 2</div>
        <div class="col-md-4">test 3</div>
</div>
<div class="row">
        <div class="col-md-4">test 5</div>
        <div class="col-md-4">test 6</div>
        <div class="col-md-4">test 7</div>
        <div class="col-md-4">test 8</div>
</div>

Итак, из приведенного выше кода, «Тест 8» будет отображаться в новой строке
Пожалуйста, дайте мне знать, если это то, что вы ожидали, или я не понял