如何根据bootstrap个网格列的奇数和偶数添加行数
How to add the number of rows based on odd and even number of bootstrap grid columns
我想根据列的奇数和偶数显示行中的 bootstrap 个网格列。
在下面的代码中,我放置了 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>
对于上面的代码,它为每个地图创建每一行。
但现在我的要求是基于行中必须调整的地图数量(偶数或奇数)。
(如果是一张就必须显示一张地图,如果有两张地图(偶数)则必须在一行内显示两张地图,如果是三张地图(奇数)则必须在一行中显示两张地图和一张地图在另一行)。
谁能帮我解决这个问题。
循环整个内容,为每个地图生成一行。
如果你想满足你的要求,那么你必须按照下面的代码循环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>
我想根据列的奇数和偶数显示行中的 bootstrap 个网格列。
在下面的代码中,我放置了 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>
对于上面的代码,它为每个地图创建每一行。 但现在我的要求是基于行中必须调整的地图数量(偶数或奇数)。 (如果是一张就必须显示一张地图,如果有两张地图(偶数)则必须在一行内显示两张地图,如果是三张地图(奇数)则必须在一行中显示两张地图和一张地图在另一行)。
谁能帮我解决这个问题。
循环整个内容,为每个地图生成一行。
如果你想满足你的要求,那么你必须按照下面的代码循环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>