如何在后台动态放置数据时调整网格列中的数据 [英] How to adjust the data in grid columns in placing the data dynamically from the backend

问题描述

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

但我的要求是基于它必须调整网格的数据(即地图数量)

例如如果映射是两个，则必须逐个显示两个映射，如果有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 layoutLike.card-deck。

由于.card-deck是Flex容器，现在可以使用Flex-Growth、-Shink和-Basis控制子对象的宽度。

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

使用css媒体查询，您只需更改Flex-Basis，即可更轻松地覆盖卡片的宽度。

DEMO

这篇关于如何在后台动态放置数据时调整网格列中的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！