Question

目前还不清楚如何在Ionic 2中创建响应式布局网格。我希望有人可以对这个主题有所了解。

我得到了grid：

<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 wrap - 2 col连续并且它们居中对齐。我将wrap属性添加到行中，但它似乎不起作用。

另外，Ionic2中是否有响应式网格？如果是这样，我该如何使用它？我还希望离子含量具有最大宽度，并且当屏幕宽度大于最大宽度时将对齐中心。现在，离子含量是绝对位置，不允许居中。

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

Answer 1

@Hugh Hou：我找到了一个很有意思的答案here。似乎离子2遗漏了一些关于响应网格的文档。

您还应该参考以下关于离子1响应网格的链接。 here

总而言之，归档你的目标。

在移动设备中将每个col显示为全宽。
平板电脑设备连续显示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>

Answer 2

现在Ionic正在使用Bootstrap grid system。我们可以使用离子网格上的固定属性轻松完成此操作。

如何在Ionic 2

2 个答案: