Ionic 2网格标题未与列数据对齐

Question

目前，我正在尝试创建一个包含多个数据字段的简单列表。我选择网格而不是简单的ion-list的原因是，我有多个数据字段，我想让headers排成一行。每一行都应该是一个可单击的详细信息，然后通过.push()命令将您带到另一个页面。由于样式不同于直接位于离子网格之后的nothing或网格开始之后的离子项，因此列标题不会与列数据对齐。如果我将标题部分设置为按钮项，它们就会匹配。有什么办法可以绕过这个问题吗？或者我基本上必须在ion-row对象上重新创建按钮样式？

<ion-grid>
  <ion-row align-items-start>
   <ion-col width-10 text-left no-border no-padding>Work Order</ion-col>
   <ion-col width-10 text-left no-border no-padding>Line</ion-col>
   <ion-col width-10 text-left no-border no-padding>Job Code</ion-col>
   <ion-col width-10 text-left no-border no-padding>Vehicle</ion-col>
   <ion-col width-25 text-left no-border no-padding>Description</ion-col>
   <ion-col width-10 text-left no-border no-padding>Time</ion-col>
   <ion-col width-10 text-left no-border no-padding>Code</ion-col>
   <ion-col width-10 text-left no-border no-padding>Repair Type</ion-col>
 </ion-row>



 <button ion-item no-margin *ngFor="let job of jobs" ngDefaultControl no-border no-padding>
  <ion-row align-items-start>
   <ion-col width-10 text-left no-border no-padding>{{job.wo}}</ion-col>
   <ion-col width-10 text-left no-border no-padding>{{job.lineNumber}}</ion-col> 
   <ion-col width-10 text-left no-border no-padding>{{job.vmrs_maj}} - {{job.vmrs_int}} - {{job.vmrs_min}}</ion-col>
   <ion-col width-10 text-left no-border no-padding>{{job.vehicle}}</ion-col>
   <ion-col width-25 text-left no-border no-padding>{{job.description}}</ion-col>
   <ion-col width-10 text-left no-border no-padding>{{job.hoursWorked}}:{{job.minutesWorked}}</ion-col>
   <ion-col width-10 text-left no-border no-padding>{{job.completionCode}}</ion-col>
   <ion-col width-10 text-left no-border no-padding>{{job.repairType}}</ion-col>

  </ion-row>
 </button>



</ion-grid>

Answer 1

离子网格由12列组成，您可以使用col-12作为列的属性，以使其跨越整个行。您只有12列可供选择，因此您可以有2个col-6、3个col-4、4个or 3、6个or 2和12个col-1，或者一些组合，比如行col-4、col-8中的两个列，分别占1/3和2/3。全部都包含在here中