@ ng-bootstrap, * ngFor и динамические столбцы

Question

У меня есть массив элементов, которые я хочу отобразить в сетке, и у меня есть 3 элемента в строке.Я использую @ng-bootstrap/ng-bootstrap в своем приложении Angular 7.Используя *ngFor, я не могу понять, как на самом деле это сделать.У меня есть небольшой stackblitz , который просто делает это:

<div class="container">
  <div>
    <label class="col-4" *ngFor="let name of items">
      <input type="checkbox" >{{ name }}
    </label>
  </div>
</div>

Я предполагал, что с тех пор, как каждый ярлык сказал col-4, что в конечном итоге он заставит новую строку после каждого третьегопункт.

Answer 1

Исправлено stackblitz

Вы забыли добавить строку класса и начальную загрузку в stackblitz

<div class="container">
  <div class='row'>
    <label class="col-4" *ngFor="let name of items">
      <input type="checkbox" >{{ name }}
    </label>
  </div>
</div>

EDIT ng-bootstrap - это просто javascript для выпадающего списка и т. д., но вам также нужно установить файл bootstrap.css, проверьте New blitzy в angular.json

    ],
    "styles": [
      "src/styles.css",
      "src/bootstrap.min.css"
    ],

на вашей машине вы будете делать (если используете npm)

npm i bootstrap --save

затем в angular.json

            "styles": [
...
              "./node_modules/bootstrap/dist/css/bootstrap.min.css",
...
            ],