bootstrap：如果其他 div 在“row”和“col-...”之间，则 col 宽度不起作用答案

【问题标题】：bootstrap: col width isn't working if other div is between "row" and "col-..."bootstrap：如果其他 div 在“row”和“col-...”之间，则 col 宽度不起作用
【发布时间】：2020-10-30 22:08:50
【问题描述】：

我有以下 html（在 Angular 中）：

<div class="container-fluid">
  <div class="row">
    <app-tile *ngFor="let tile of tiles" [tile]="tile"></app-tile>
  </div>
</div>

app-tile 看起来像这样：

<div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
...
</div>

问题似乎是，容器 app-tile 位于“row”和“col-xs-12 col-sm-4 ...”类之间。所以 app-tile 容器中的 div 没有 col-.... 指定的正确宽度。

一些强制性的：

tile 的宽度必须直接在 tile 组件中设置，因为有可能由于不允许用户查看某些图块而无法显示。如果我将宽度直接放在 ngFor-Loop 中，隐藏的图块将有一个空白容器。

第一次尝试：https://stackblitz.com/edit/angular-wfjj5n?embed=1&file=src/app/alert-basic.html 这里的瓷砖有正确的宽度，但我在第一个和第三个瓷砖之间有一个空白容器（因为第二个瓷砖被隐藏了）

第二次尝试：https://stackblitz.com/edit/angular-wfjj5n-weuark?embed=1&file=src/app/tile/tile.component.ts 将 col-widths 移动到 tile 本身。现在空白的白色容器消失了，但瓷砖的宽度不再正确。

【问题讨论】：

width 正在申请中您要签入响应版还是移动版？如果检查桌面版本，您将看到更改。 @user2622344

标签： angular bootstrap-4

【解决方案1】：

你可以试试：

 <div class="container-fluid">
      <div class="row">
        <app-tile *ngFor="let tile of tiles" [tile]="tile" [ngClass]="!isTileHidden(tile) ? 'col-xs-12 col-sm-4 col-md-3 col-lg-2' : 'd-none'"></app-tile>
      </div>
    </div>

在您的 .ts 中

isTileHidden(tile) {
  if(// condition here) {
    return true;
  } else {
    return false;
  }
}

【讨论】：