Как разделить карты на ряды, в каждом ряду по 4 карты - PullRequest
Новая
       13

Как разделить карты на ряды, в каждом ряду по 4 карты

1 голос
/ 16 июня 2019

Я хочу сделать сайт похожим на электронную торговлю с помощью карточек, и я использую Angular и MdBootstrap UI Kit.

Предположим, у меня 18 карт, я хочу 4 ряда по 4 карты, а в последнем ряду должно быть 2 карты. Мои данные для карт поступают из бэкэнда в формате json.

Но я получаю этот вывод.

With the current code

Что я желаю, так это.

Want to achieve this

Код, который у меня есть на данный момент

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>

ц: - 

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

Ответы [ 2 ]

1 голос
/ 17 июня 2019

Чтобы ваш код работал, вам нужно определить ширину каждой карточки , а не просто поле.

Определение отсутствия ширины позволяет div занимать все доступное пространство в соответствии с ним на уровне блоков, и это то, что происходит с двумя последними картами. Он расширяется всякий раз, когда у него появляется шанс, потому что его детям нужно пространство.

Использование display: flex; и flex-wrap: wrap; вместе с определенной шириной карты даст вам нужный результат. Вам, вероятно, нужно установить justify-content в соответствии с вашими требованиями.

Теперь трудно хранить только четыре (или n) карты подряд, используя flex, учитывая, что отношение размера экрана к размеру карты может варьироваться, но вы можете установить родительский элемент вычисленной ширины для всех карточки, чтобы быть уверенным, что одновременно может быть только 4 ребенка.

Я сделал скрипку здесь для вас, чтобы проверить. Попробуйте развернуть окно результатов и снова запустить, чтобы увидеть, о чем я говорю).

Проверьте здесь для справки.

0 голосов
/ 17 июня 2019

Вот рабочий угловой пример , использующий только свойства flex.

Хост-элемент является гибким контейнером и имеет следующие свойства css: 

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

, в то время как mdb-карта является гибким элементом со следующими свойствами: 

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

Нет необходимости в элементах .row и .col.

...