Limit number of cards per card deck in Bootstrap 4

问题:

I'm trying to display up to 2 cards in a card deck. If there are any additional cards to display, they should be placed in a new deck, below the previous one.

How can I achieve this? Where can I specify the maximum number of cards for each deck?

The HTML looks like this (with a little bit of Angular):

<div class="card-deck">
  <div *ngFor="let item of dataService.getItems()" class="card">
    <div class="card-body">
      <h4 class="card-title">{{ item.title }}</h4>
      <p class="card-text">{{ item.content }}</p>
      <p class="card-text"><small class="text-muted">Item ID: {{ item.id }}</small></p>
    </div>
    <div class="card-footer">
      <div class="text-right">
        <div class="btn-group" role="group" aria-label="Controls">
          <button type="button" class="btn btn-primary btn-sm">Reply</button>
          <button type="button" class="btn btn-danger btn-sm">Delete</button>
        </div>
      </div>
    </div>
  </div>
</div>

回答1:

Solved it with inspiration from Obsidian Age's advice.

Changed dataService.getItems() so it returns groups of 2 items.

<div *ngFor="let group of dataService.getItems()" class="card-deck my-3">
  <div *ngFor="let item of group" class="card">
    <div class="card-body">
      <h4 class="card-title">{{ item.title }}</h4>
      <p class="card-text">{{ item.content }}</p>
      <p class="card-text"><small class="text-muted">Item ID: {{ item.id }}</small></p>
    </div>
    <div class="card-footer">
      <div class="text-right">
        <div class="btn-group" role="group" aria-label="Controls">
          <button type="button" class="btn btn-primary btn-sm">Reply</button>
          <button type="button" class="btn btn-danger btn-sm">Delete</button>
        </div>
      </div>
    </div>
  </div>
</div>