Question

我有一个要显示在网格中的项目数组，每行有3个项目。我在Angular 7应用程序中使用@ng-bootstrap/ng-bootstrap。使用*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>

编辑 ng-bootstrap只是下拉菜单等的JavaScript，但是您也需要安装bootstrap.css文件，还需要检查angular.json中的新建blitzy

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

您将在计算机上执行操作（如果使用npm）

npm i bootstrap --save

然后在angular.json中

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

@ ng-bootstrap，* ngFor和动态列

1 个答案: