Html 离子2网格标题未与列数据对齐

目前，我正在尝试创建一个包含多个数据字段的简单列表。我之所以选择网格而不是简单的离子列表，是因为我有多个数据字段，希望标题与之对齐。每一行都应该是可单击的详细信息，然后通过.push（）命令将您带到另一页。由于样式不同于直接在离子网格之后的nothing或网格开头之后的离子项，因此列标题与列数据不对齐。如果我将标题部分设置为按钮项，则它们确实匹配。有没有办法绕过这个问题？或者我必须在离子行对象上重新创建按钮样式吗

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

工单
线
职务代码
车辆
描述
时间
代码
修复类型
{{job.wo}
{{job.lineNumber}
{job.vmrs_-maj}-{job.vmrs_-int}-{job.vmrs_-min}
{{job.vehicle}
{{job.description}
{{job.hoursWorked}}:{{job.minutesWorked}
{{job.completionCode}
{{job.repairType}

离子网格由12列组成，您可以在列上使用col-12作为属性，使其跨越整行。 您只有12列可供选择 因此，您可以有2列6，3列4，4，3列6列2列12列1，或者像第4列和第8列中的两列这样的组合，分别占据1/3和2/3。都包好了