css - 使用 bootstrap 4 和 Angular 显示两个项目列表

Question

使用 Bootstrap 4，我想在前三列中显示项目列表，然后在接下来的 9 列中显示我的卡片组。

然后，当我选择项目时，它会在屏幕右侧显示结果。

这是代码示例：

<div class="container mt-4">
  <div class="col-sm-3">
    <ul class="list-group" *ngIf="categories">
      <li [ngClass]="currentCategorie==c?'active':''"(click)="getProductsByCategorie(c)" class="list-group-item clickable" *ngFor="let c of categories._embedded.categories">
        {{c.name}}
      </li>
    </ul>
  </div>
  <div class="col-sm-9">
    <router-outlet></router-outlet>
  </div>
</div>

对于卡组：

<div *ngIf="products">
  <div class="card-group">
    <div class="col-sm-3" *ngFor="let p of products._embedded.products">
      <div class="card">
        <img height="100" src="{{this.catService.host+'/photoProduct/'+p.id}}" class="card-img-top" alt="{{ p.name }}">
      <div class="card-body">
        <h5 class="card-title">{{p.name}}</h5>
        <p class="card-text">{{p.currentPrice | number: '0.2'}}</p>
      </div>
      </div>
    </div>
  </div> 
</div>

有什么解决办法吗？请

目前显示如下：

Selector 1
Selector 2
Selector 3
Item 1 - Item 2 - Item 3 - Item 4
Item 5 - Item 6 ...

我希望有 ：

Selector 1 | Item 1 - Item 2 - Item 3
Selector 2 | Item 4 - Item 5 - Item 6
Selector 3 | Item 7 - Item 8 - Item 9
             Item 10 ...
             Item 13 ...

标签： cssangular