1

カードを使った E コマースのようなサイトを作りたいと思っており、Angular と MdBootstrap UI Kit を使用しています。

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

2 に答える 2

1

コードを機能させるには、マージンだけでなく、各カードの幅を定義する必要があります。

幅を定義しないdivと、ブロック レベルで使用可能なスペース全体を使用できます。これが、最後の 2 枚のカードで起こっていることです。子供たちがスペースを必要とするため、機会があればいつでも拡大しています。

カードの明確な幅とともに を使用するdisplay: flex;と、必要な結果が得られます。flex-wrap: wrap;おそらくjustify-content、要件に合わせて設定する必要があります。

現在、画面サイズとカード サイズの比率が異なる可能性があるため、flex を使用して 4 枚 (または n 枚) のカードのみを連続して保持することは困難ですが、計算された幅の親をすべてのカードに設定して、そこにあることを確認できます。一度に4人の子供しかできません。

私はあなたがチェックするためにここにフィドルを作りました. 結果ウィンドウを拡大して再実行して、私が話していることを確認してください)。

参考までにこちらをご覧ください。

于 2019-06-17T09:00:55.363 に答える