如何将卡片分成几行，每行有 4 张卡片

Question

我想用卡片制作一个类似于电子商务的网站，我正在使用 Angular 和 MdBootstrap UI 套件。

假设我有 18 张卡片，我想要 4 行每行 4 张卡片，最后一行应该有 2 张卡片。我的卡片数据来自 json 格式的后端。

但我得到了这个输出。

我想要的就是这个

我目前拥有的代码

html:-

<div class="container">
  <div class="row" *ngFor='let row of grid'>
    <div class="col" *ngFor='let c of row'>
      <div style="margin: 10px">
        <mdb-card>
          <!--Card image-->
          <mdb-card-img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(97).jpg" alt="Card image cap"></mdb-card-img>
          <!--Card content-->
          <mdb-card-body>

            <!--Title-->
            <mdb-card-title>
              <h4>{{c}}</h4>
            </mdb-card-title>

            <!--Text-->
            <mdb-card-text> Some quick example text to build on the card title and make up the bulk of the card's
              content.
            </mdb-card-text>

            <a href="#" mdbBtn color="primary" mdbWavesEffect>Button</a>
          </mdb-card-body>
        </mdb-card>
      </div>
    </div>
  </div>
</div>

ts:-

export class HomeComponent implements OnInit {
  cards: number;
  grid: number[][];
  constructor() {}

  ngOnInit() {
    this.cards = 18;
    this.gridgenerator();
  }

  gridgenerator(): number[][] {
    let last = this.cards % 4;
    let rows =
      this.cards % 4 === 0
        ? new Array(Math.floor(this.cards / 4))
        : new Array(Math.floor(this.cards / 4 + 1));
    this.grid = new Array(rows);
    for (let r = 0; r < rows.length; r++) {
      if (r === rows.length - 1) {
        this.grid[r] = new Array(last);
      } else {
        this.grid[r] = new Array(4);
      }
    }
    console.log(this.grid);

    return this.grid;
  }
}

Answer 1

为了让您的代码正常工作，您需要定义每张卡片的宽度，而不仅仅是边距。

不定义宽度允许 div 根据它在块级别占用整个 space 可用，这就是最后两张卡片的情况。只要有机会它就会扩展，因为它的 children 需要 space.

使用 display: flex; 和 flex-wrap: wrap; 以及卡片的确定宽度将为您提供所需的结果。您可能需要设置 justify-content 以满足您的要求。

现在，考虑到您的屏幕尺寸与卡片尺寸的比例可能会有所不同，因此很难使用 flex 将四张（或 n 张）卡片排成一排，但您可以设置一个 parent , 计算宽度, 在所有卡片上, 以确保一次只能有 4 children.

我做了一个fiddlehere给你看。尝试扩展结果 window 和 re-running 看看我在说什么）。

检查 here 以供参考。

Answer 2

这里是 working angular example，只使用了 flex 属性。

宿主元素是一个弹性容器并具有以下 css 属性：

:host {
  display: flex;
  flex-wrap: wrap;
}

而 mdb-card 是具有以下属性的弹性项目：

mdb-card {
  margin: 10px;
  flex-basis: calc(25% - 2 * 10px); // 25% minus left and right margins.
}

不需要 .row 和 .col 元素。

如何将卡片分成几行，每行有 4 张卡片

How do I divide cards into rows with every row having 4 cards

angular

mdbootstrap