css - ionic 网格系统3x3不适用

我正在尝试使用Ionic的网格系统来创建它



我的html代码：

  <ion-content>
    <div class="row responsive-md" >
        <div class="col col-33">
            <div>
                <a ng-repeat="gin in gins" href="#">
                    <img class="gin-mixes-placeholder" ng-src="{{gin.src}}">
                    <p>{{gin.title}}</p>
                </a>
            </div>
        </div>
    </div>
  </ion-content>

但是结果又回来了：



我的html代码应该工作，因为我在另一个项目中使用了这段代码，所以我不明白为什么我的网格系统不工作以及我为什么要这样做。

我使用的唯一的CSS是图像的宽度和高度。

最佳答案

找到了解决方案，这要归功于懒散的离子社区的人们

对于那些想知道如何在这里解决问题的人，您可以执行以下操作：

<ion-content class="padding" ng-controller="GinMixesCtrl">
        <div class="row" ng-repeat="gin in gins" ng-if="$index %3 === 0">
            <div class="col col-33" ng-if="$index < gins.length">
                <a  href="#" >
                    <img class="gin-mixes-placeholder" ng-src="{{gins[$index].src}}">
                    <p class="customH2_gin-mixes-title">{{gins[$index].title}}</p>
                </a>
            </div>
            <div class="col col-33" ng-if="$index+1 < gins.length">
                <a  href="#" >
                    <img class="gin-mixes-placeholder" ng-src="{{gins[$index+1].src}}">
                    <p class="customH2_gin-mixes-title">{{gins[$index+1].title}}</p>
                </a>
            </div>
            <div class="col col-33" ng-if="$index+2 < gins.length">
                <a  href="#" >
                    <img class="gin-mixes-placeholder" ng-src="{{gins[$index+2].src}}">
                    <p class="customH2_gin-mixes-title">{{gins[$index+2].title}}</p>
                </a>
            </div>
        </div>
    </ion-content>