如何在后端动态放置数据时调整网格列中的数据

问题描述

我想从后端将地图放置在网格系统中我已经放置了地图但以垂直方式放置。

但我的要求是基于数据（即没有地图）它必须调整网格

例如如果有两张地图，则必须一张一张地显示两张地图，如果有4张地图，则必须在第一行显示两张地图，在第二行显示两张地图，依此类推在引导网格系统中。

.component.html

<div *ngFor="let x of data ; let i =index">

    <div class="container">
      <div class="row no-gutters">
      <div class="col-sm-5">
       
        <div id="x{{i}}"  ng-onload="mulmaps(x{{i}});" style="height: 300px;"></div>

      </div>

    </div>
  </div>

解决方法

不要在循环中使用 .container、.row 或 .col，而是使用 card layout 之类的 .card-deck。

由于 .card-deck 是一个 flex 容器，子元素的宽度现在由您使用 flex-grow、-shrink 和 -basis 控制。

<div class="card-deck">
    <div class="card">...</div>
    <!-- ... repeat n times depending on your data -->
</div>

使用 CSS 媒体查询，您可以通过更改 flex-basis 更简单地覆盖卡片的宽度。

DEMO