Ionic 2 Grid 标题未与列数据对齐答案

【问题标题】：Ionic 2 Grid headers not lining up with column dataIonic 2 Grid 标题未与列数据对齐
【发布时间】：2017-08-05 08:15:17
【问题描述】：

目前我正在尝试创建一个包含多个数据字段的简单列表。我选择网格而不是简单的离子列表的原因是我有多个数据字段，我希望标题与之对齐。每一行都应该是一个可点击的详细信息，然后通过 .push() 命令将您带到另一个页面。由于在 ion-grid 之后的样式与没有直接在 ion-grid 之后或在网格开始之后的 ion-item 不同，列标题与列数据不对齐。如果我将标题部分设置为按钮 ion-item，它们确实匹配。有没有办法解决这个问题？还是我必须基本上重新创建 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>

【问题讨论】：

标签： html ionic-framework ionic2

【解决方案1】：

离子网格由 12 列组成，您可以使用 col-12 作为列上的属性以使其跨越整行。您只有 12 列可供选择所以你可以有 2 col-6、3 col-4、4、col-3 6 col-2 12 col-1，或者像 col-4、col-8 行中的两列这样的组合，它们会占用 1/3 , 2/3 分别。全部覆盖here

【讨论】：