如何利用ng-重复创建离子卡片的动态排列

Question

目前，我的离子型应用程序主页看起来如下：

​

​

当应用程序是平板电脑大小时，卡就会延伸到屏幕上，占用大量不必要的空间。我希望这些卡片并排在一起，只是当应用程序在手机上运行时，卡片应该排在一列中，如下所示：

在平板电脑上-

[card 1] [card 2] [card 3] [card 4]
[card 5] [card 6] [card 7] [card 8]
[card 9] [card 10] [card 11] [card 12]
etc...

在电话里-

[card 1]
[card 2]
[card 3]
[card 4]
etc...

我的问题是:如何更改以下代码(它使用ng-重复)来创建所需的卡片动态布局？

<div class="card" ng-repeat="schedule in vm.scheduleData | orderBy: '-ScheduleDate' | limitTo: 100"
        ng-click="vm.selectMasterBill(schedule.MasterBOLNumber)">
    <div class="item item-divider item-positive">
        Master BOL Number {{schedule.MasterBOLNumber}}
    </div>
    <div class="item item-divider">
        <p>Date scheduled: {{vm.parseDate(schedule.ScheduleDate)}}</p> 
    </div>
    <div class="item item-divider">
        <p>Scheduled by: {{schedule.ScheduleBy}}</p>
    </div>
    <div class="item item-divider">
        <p>Carrier code: {{schedule.CarrierCode}}</p>
    </div>
</div>

Answer 1

在样式表中使用媒体查询。

例如: scss/css文件如下所示：

.responsive-card {
    width: 100%;
    float: left;
}

@media screen and (min-width: 768px) {
    .responsive-card {
        width: 25%;
    }
}

不要忘记在html中添加responsive-card类：

<div class="card responsive-card" ng-repeat="schedule in vm.scheduleData">
    ...
</div>