离子网格系统3x3不适用

Question

我正在尝试使用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是图像的宽度和高度。

Answer 1

感谢懒散的Ionic社区的人们找到了解决方案

对于那些想知道如何在这里解决问题的人，你去：

<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>