如何在Ionic 2中获得响应式网格布局

Question

在Ionic 2中如何创建响应式布局网格并不是很清楚。希望有人能够为这个主题提供一些指导。

我得到了一个网格：

<ion-content class="home card-background-page" padding>
  <ion-row wrap>
    <ion-col>
      <ion-card *ngFor="let location of dataService.allLocationDetail.location | keys" (click)="openPage(location.data.locationId)">
        <img [src]="location.data.coverArt"/>
        <div class="card-title">{{location.data.name}}</div>
        <div class="card-subtitle">{{location.data.date}}</div>
      </ion-card>
    </ion-col>
  </ion-row>
</ion-content>

我希望ion-col的最大宽度为500px。如果视图大于500px，比如在iPad横向模式下，我想让col换行 - 2列每行，并使它们居中对齐。我在行上添加了wrap属性，但似乎不起作用。

此外，Ionic2中是否有响应式网格？如果有，我该如何使用？我还希望ion-content具有最大宽度，并且当屏幕宽度大于最大宽度时居中对齐。现在，ion-content是绝对定位的，不允许居中。

使用Ionic 2进行响应式布局的最佳策略是什么？

- Hugh Hou

Answer 1

@Hugh Hou: 我在这里发现一个好的有趣答案。看起来Ionic 2缺少一些关于响应式网格方面的文档。

您还应参考以下链接，了解Ionic 1响应式网格。在这里。

因此，总之，要实现您的目标：

1. 在移动设备中，将每个列显示为全宽度。
2. 在平板电脑设备中，每行显示2个或更多个列。

尝试这样做。

<ion-content class="home card-background-page" padding>
  <ion-row responsive-sm>      
    <ion-col>
      <ion-card *ngFor="let location of dataService.allLocationDetail.location | keys" (click)="openPage(location.data.locationId)">
        <img [src]="location.data.coverArt"/>
        <div class="card-title">{{location.data.name}}</div>
        <div class="card-subtitle">{{location.data.date}}</div>
      </ion-card>
    </ion-col>
  </ion-row>
</ion-content>

- trungk18

Answer 2

现在Ionic正在使用Bootstrap网格系统。我们可以通过在ion-grid上使用fixed属性轻松实现这一点。

- Sandeep Sharma