如何根据引导网格列的奇数和偶数添加行数答案

【问题标题】：How to add the number of rows based on odd and even number of bootstrap grid columns如何根据引导网格列的奇数和偶数添加行数
【发布时间】：2021-04-22 11:41:54
【问题描述】：

我想根据列的奇数和偶数在行中显示引导网格列。

在下面的代码中，我放置了 for 循环，因此基于后端数据，它将创建地图循环。

.component.html

 <div *ngFor="let map of sensors; let i = index" >

    <div class="container">
      <div class="row no-gutters" >
      <!--<div class="col-sm-6 col-md-4 col-lg-3" style="margin-left: -10px;">-->
        <div class="col-sm-4" style="margin-left: -10px;">

        <div id="map{{i}}"  ng-onload="mulmaps(map{{i}});" style="height: 300px;border: 1px solid gray;"></div>

      </div>

对于上面的代码，它为每个地图创建每一行。但现在我的要求是基于它必须在行中调整的地图数量（偶数或奇数）。（如果是一张则必须显示一张地图，如果有两张地图（偶数）它必须在一行内显示两张地图，如果有三张地图（奇数）它必须在一行中显示两张地图和一张地图在另一行）。

谁能帮我解决这个问题。

【问题讨论】：

标签： twitter-bootstrap bootstrap-4 twitter-bootstrap-3 angular-ui-bootstrap bootstrap-grid

【解决方案1】：

你循环你的整个内容，这会为每个地图创建一行。

如果您想满足您的要求，则必须按照以下代码循环 col-sm-6。

<div class="container">
  <div class="row no-gutters">
    <div class="col-sm-6" *ngFor="let map of sensors; let i = index">
      <div id="map{{i}}" ng-onload="mulmaps(map{{i}});" style="height: 300px;border: 1px solid gray;">
      </div>
    </div>
  </div>
</div>

【讨论】：