Bootstrap 4中每个卡组的限制卡数 [英] Limit number of cards per card deck in Bootstrap 4

问题描述

我正在尝试在一个卡片组中最多显示2张卡片.如果要显示其他卡，则应将它们放在新卡组中，在前一个卡组的下方.

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?

HTML看起来像这样(有一些Angular):

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>

推荐答案

从黑曜石时代的建议中得到启发.

Solved it with inspiration from Obsidian Age's advice.

更改了dataService.getItems()，因此它返回了2个项目的组.

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>

这篇关于Bootstrap 4中每个卡组的限制卡数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！