Css 使用angularjs ng repeat和bootstrap类在框中显示产品，但它以错误的方式显示

我想在盒子里展示产品，就像其他电子商务网站上展示的一样

我正在使用AngularJS

ng repeat

和引导类，但它以错误的样式显示产品

这是我的密码：

<div class="row" id="grdDiv">
    <div ng-repeat="category in groupMenuCategories">
        <div class="col-md-3 col-lg-3" ng-repeat="grpMenuItem in category.menuItems">
            {{grpMenuItem.itemName}}
        </div>
    </div>
</div>

{{grpMenuItem.itemName}

网站上所需的输出：

第1项第2项第3项第4项

第5项第6项第7项第8项 . .

电流输出：

项目1项目4项目6

项目2项目5项目7

项目3（无项目）项目8

（无项目）-项目9

链接： 您可以使用

<div class="row">
    <div class="col-sm-3" ng-repeat="grpMenuItem in category.menuItems"> 
        {{grpMenuItem.itemName}}
    </div>
</div>

{{grpMenuItem.itemName}

以获得4个等宽列

如果需要将4列中的每一列放在单独的行中，可以尝试以下方法

<div ng-repeat="grpMenuItem in category.menuItems" class="row" ng-if="$index<category.menuItems.length/4+1">
    <div  ng-repeat="grpMenuItem in category.menuItems" class="col-sm-3" ng-if="$index>=4*$parent.$index && $index <= 4*($parent.$index+1)-1">
    </div>
</div>

代码中的问题是menuItem是数组，因此必须以这种方式获取值itemName

<div ng-repeat="grpMenuItem in groupMenuCategories" class="row" ng-if="$index<groupMenuCategories.length/4+1">
    <div ng-repeat="grpMenuItem in groupMenuCategories" class="col-sm-3" ng-if="$index>=4*$parent.$index && $index <= 4*($parent.$index+1)-1">
        <h4>{{grpMenuItem.menuItems[0].itemName}}</h4>
    </div>
</div>

{{grpMenuItem.menuItems[0].itemName}

---

您需要使用一些col类：它们需要直接跟随您的ROW。我正在使用col md和col lg，如果其位置不合适，请立即检查问题。然后告诉我，把这个放在哪里。我做了，但没有解决。我在第二部分添加了一些文本，但没有显示任何内容。为you@FaseehHaris只需使用您的项目数组更改演示中的数据。我添加了代码和一些数据，请检查我问题中的链接，我编辑了问题并在链接中提供了数据