bootstrap: ширина столбца не работает, если другой div находится между строками и столбцами -...

Question

У меня есть следующее html (в Angular):

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

Плитка приложения выглядит так:

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

Проблема, похоже, в том, что контейнер app-tile находится между классами «row» и «col-xs-12 col-sm-4 ...». Таким образом, div внутри контейнера app-tile не имеет правильной ширины, указанной в col -....

Некоторые обязательные требования:

Ширина плитки должна быть установлена ​​непосредственно в компонент плитки, потому что может быть возможно, что некоторые плитки не будут отображаться из-за того, что пользователю не разрешено их видеть. Если я помещу ширину непосредственно в ngFor-L oop, скрытые плитки будут иметь пустой контейнер.

Первая попытка: https://stackblitz.com/edit/angular-wfjj5n?embed=1&file=src / app / alert-basi c. html Здесь плитки имеют правильную ширину, но у меня есть пустой контейнер между первой и третьей плиткой (потому что вторая плитка скрыта)

Вторая попытка: https://stackblitz.com/edit/angular-wfjj5n-weuark?embed=1&file=src / app / tile / tile.component.ts Ширина столбцов перенесена в сам тайл. Теперь пустой белый контейнер исчезает, но ширина плиток больше не правильная.

Answer 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;
  }
}