时间戳

首页 > 解决方案 > @ng-bootstrap、*ngFor 和动态列

angular - @ng-bootstrap、*ngFor 和动态列

问题描述

我有一个要在网格中显示的项目数组，每行有 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它最终会在每第三个项目之后强制一个新行。

标签： angularbootstrap-4angular7

解决方案

修复它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中的New 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",
...
            ],

推荐阅读